HTML & CSS Masterclass Tutorial

Comprehensive guide to modern HTML and CSS development.

Box Model

The CSS Box Model

The Box Model is arguably the most important concept in CSS. Every element on a webpage is a rectangular box. The box consists of four layers (from inside to outside):

Content: The actual content (text, image).
Padding: Clears an area around the content. Padding is transparent and sits inside the border.
Border: A border that goes around the padding and content.
Margin: Clears an area outside the border. Margin is transparent and pushes other elements away.

box-sizing: border-box

By default, adding padding and borders makes the element wider than the width you set. By setting box-sizing: border-box;, padding and borders are included in the element's total width and height. This is a standard practice on modern websites.

Try It Yourself

Edit the code below and click Run to see the result live.

Source Code

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: sans-serif; background: #e0e0e0; display: flex; justify-content: center; padding: 50px; }
    
    .box-model-demo {
      /* 1. Content Size */
      width: 200px;
      height: 100px;
      background-color: #3498db;
      color: white;
      text-align: center;
      font-weight: bold;
      
      /* 2. Padding (Inside the border) */
      padding: 30px;
      
      /* 3. Border */
      border: 10px solid #2c3e50;
      
      /* 4. Margin (Outside the border) */
      margin: 40px;
      
      /* Essential Fix: */
      /* Without border-box, actual width = 200+30+30+10+10 = 280px! */
      box-sizing: border-box; 
    }
    
    .visualization {
      background: #f1c40f; /* Margin area color visualization */
      border: 1px dashed black;
    }
  </style>
</head>
<body>

<div class="visualization">
    <div class="box-model-demo">
      <br>CONTENT AREA<br>
      Width: 200px<br>
      (Padding & Border are absorbed inside thanks to border-box)
    </div>
    <div style="text-align:center; padding-bottom:10px; font-weight:bold;">
      Yellow area represents the 40px Margin pushing elements away!
    </div>
  </div>

</body>
</html>

Result

Topics