CSS Box Model Demo

Understanding the fundamental layout model of CSS

Back to Exercises

What is the CSS Box Model?

The CSS box model describes how elements are rendered on a web page. Every element is treated as a rectangular box with content, padding, border, and margin areas.

Box Model Visualization

The box model consists of four main areas:

Complete Box Model

HTML

<div class="box-model-demo">
    <div class="box-element"></div>
</div>
/* Box Model CSS */
.box-element {
    /* Content Area */
    width: 200px;
    height: 100px;
    
    /* Padding - Internal spacing */
    padding: 2rem;
    
    /* Border - Edge of the element */
    border: 4px solid #1d4ed8;
    
    /* Margin - External spacing */
    margin: 1rem;
}

Margin

Margin creates space outside the element's border:

Margin Demo

Box with Margin
Another Box with Margin

HTML

<div class="margin-demo">
    <div class="margin-box">Box with Margin</div>
    <div class="margin-box">Another Box with Margin</div>
</div>
/* Margin CSS */
.margin-box {
    background: #8b5cf6;
    padding: 1rem;
    margin: 2rem;        /* All sides */
    /* margin: 1rem 2rem;     Top/Bottom Left/Right */
    /* margin-top: 1rem;     Individual sides */
}

Border

Border defines the edge of the element:

Border Demo

Box with Border

HTML

<div class="border-demo">
    <div class="border-box">Box with Border</div>
</div>
/* Border CSS */
.border-box {
    border: 8px solid #dc2626;    /* Width Style Color */
    border-radius: 8px;           /* Rounded corners */
    /* border-top: 2px solid red;   Individual sides */
}

Display Property

Display controls how elements are rendered:

Display Types

Block Element
Another Block Element
Inline Element Another Inline
Inline-Block
Another Inline-Block

HTML

<div class="display-demo">
    <div class="display-block">Block Element</div>
    <div class="display-block">Another Block Element</div>
    <span class="display-inline">Inline Element</span>
    <span class="display-inline">Another Inline</span>
    <div class="display-inline-block">Inline-Block</div>
    <div class="display-inline-block">Another Inline-Block</div>
</div>
/* Display CSS */
.display-block { display: block; }           /* Full width, new line */
.display-inline { display: inline; }          /* Width of content, same line */
.display-inline-block { display: inline-block; } /* Width of content, new line */

Position Property

Position controls how elements are positioned:

Position Types

Static (Default)
Relative (Offset from normal position)
Absolute (Positioned relative to nearest positioned ancestor)
Fixed (Positioned relative to viewport)

HTML

<div class="position-demo">
    <div class="position-static">Static (Default)</div>
    <div class="position-relative">Relative (Offset from normal position)</div>
    <div class="position-absolute">Absolute (Positioned relative to nearest positioned ancestor)</div>
</div>
<div class="position-fixed">Fixed (Positioned relative to viewport)</div>
/* Position CSS */
.position-static { position: static; }       /* Default, normal flow */
.position-relative { position: relative; top: 20px; left: 20px; }
.position-absolute { position: absolute; top: 20px; right: 20px; }
.position-fixed { position: fixed; bottom: 20px; right: 20px; }

Float Property

Float moves elements to the left or right side of their container:

Float Demo

Float Left
Float Right

This text flows around the floated elements. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

HTML

<div class="float-demo">
    <div class="float-left">Float Left</div>
    <div class="float-right">Float Right</div>
    <p>This text flows around the floated elements...</p>
</div>
/* Float CSS */
.float-left { float: left; }
.float-right { float: right; }
.clear-both { clear: both; }              /* Clear floats */

Clear Property

Clear prevents elements from floating next to floated elements:

Clear Demo

Float Left
Float Right
Cleared Element
Normal Element

HTML

<div class="clear-demo">
    <div class="float-left">Float Left</div>
    <div class="float-right">Float Right</div>
    <div class="clear-box clear-both">Cleared Element</div>
    <div class="clear-box">Normal Element</div>
</div>
/* Clear CSS */
.clear-left { clear: left; }         /* Clear left floats */
.clear-right { clear: right; }       /* Clear right floats */
.clear-both { clear: both; }         /* Clear all floats */

Box Model Properties

  • Content: The actual content (text, images, etc.)
  • Padding: Space between content and border
  • Border: The edge of the element
  • Margin: Space outside the border
  • Width/Height: By default, applies to content area only
  • Box-sizing: Controls what width/height includes

Box-Sizing Property

  • content-box: Width/height applies to content only (default)
  • border-box: Width/height includes padding and border
  • Best Practice: Use * { box-sizing: border-box; } for easier sizing