❮ Previous

CSS Box Model

  • Learn the CSS Box Model and how padding, borders, and margins affect element layout.

  • This lesson explains the basic structure of an HTML document, including the doctype declaration, html tag, head section, and body section.

    In CSS, the Box Model is the foundation of web design and layout
    It explains how every HTML element is displayed on a webpage.

    Important rule:
    Every HTML element is treated as a rectangular box by the browser.

    What Does the Box Model Include ?

    Every box is made up of 4 layers, arranged from inside → outside:

    Content → Padding → Border → Margin

    Think of it like a gift box 

    • Gift = Content

    • Paper = Padding

    • Box = Border

    • Space around box = Margin

  • Explanation of Each Part

    Content

    • This is the actual content of the element

    • Text, images, videos appear here

    • Width & height apply ONLY to content by default

    Padding

    • Space inside the element, around the content

    • Padding is transparent

    • Pushes content away from the border

    Makes content breathe 

     Border 

    • Border wraps content + padding

    • It is visible

    • You can control:

      • Color 

      • Style (solid, dashed, dotted)

      • Thickness 

    Margin 

    • Space outside the element

    • Creates distance between elements

    • Margin is also transparent

    Helps in layout spacing

    Why the Box Model is Important ? 

    The Box Model helps you to:

    Add borders properly
    Control inner spacing (padding)
    Control outer spacing (margin)
    Design layouts accurately & professionally

    Without it → layouts break

CSS Box Model Example

This example demonstrates the CSS Box Model, where a div includes content width, padding, border, and margin to control spacing and layout around the element. 

div {
  width: 300px;
  padding: 50px;
  border: 15px solid green;
  margin: 20px;
}

  • What’s happening here ?

    • Content width = 300px

    • Padding adds space inside

    • Border wraps content + padding

    • Margin adds space outside

    Width & Height – Important Concept 

    When you write:

    width: 300px;

    height: 100px;

    You are setting the size of CONTENT ONLY
    Padding & border are NOT included

    Width & Height Calculation Example

    div {

      width: 320px;

      height: 50px;

      padding: 10px;

      border: 5px solid gray;

      margin: 0;

    }

    Total Width Calculation

    320px  → content

    20px   → padding (10px + 10px)

    10px   → border (5px + 5px)

    -------------------------

    350px  → total width

    Total Height Calculation

    50px   → content

    20px   → padding (10px + 10px)

    10px   → border (5px + 5px)

    -------------------------

    80px   → total height

    Formula to Remember 

    Total Width

    width + left padding + right padding + left border + right border

    Total Height

    height + top padding + bottom padding + top border + bottom border

    Quick Summary

    Every HTML element is a box
    Box Model has 4 parts:

    • Content

    • Padding

    • Border

    • Margin

    Width & height apply only to content
    Padding & border increase total size
    Mastering the Box Model = Perfect layouts
❮ Previous