Prev Next

CSS Box Model

The CSS box model describes how elements are structured on a webpage. Each element is a box made up of content, padding, borders, and margins. Understanding the box model helps you control spacing, layout, and alignment, ensuring elements appear exactly as intended.

Key Topics

Components of the Box Model

Each element box consists of: Content (text or image), Padding (inside space), Border (outline), and Margin (outside space). Visualizing these layers helps you adjust spacing accurately.

Calculating Total Size

By default, the total width = content width + padding + border + margin (horizontal sides combined). Similarly for height. This can affect responsive layouts if not accounted for properly.

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8" >
    <meta name="viewport" content="width=device-width, initial-scale=1.0" >
    <title>Box Model Example</title>
    <style>
        .box {
            width: 200px;
            padding: 20px;
            border: 2px solid #333;
            margin: 20px;
            background-color: #ddd;
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>
    <div class="box">
        <h2>Box Model</h2>
        <p>Content + Padding + Border + Margin makes up the total space used.</p>
    </div>
</body>
</html>

Explanation: Although the width is set to 200px, adding padding and border increases the total space the element occupies. Margins further affect the final positioning.

Box-Sizing Property

Setting box-sizing: border-box; makes the declared width and height include content, padding, and border, simplifying responsive design calculations.

Key Takeaways

  • Layers: Content, padding, border, margin define an element’s space.
  • Sizing: Understand how these layers add up to manage layouts effectively.
  • Box-Sizing: border-box can simplify responsive design by altering how width/height is calculated.
Prev Next