Box Model Fundamentals

1. The Core Concept

In CSS, every single HTML element—from a heading (<h1>) to a link (<a>) to a division (<div>)—is treated as a rectangular box. The Box Model describes the structure of these boxes and how properties like padding, borders, and margins are applied to them.

The box model consists of four distinct, concentric layers, moving from the inside out:

1. Content
2. Padding
3. Border
4. Margin

2. The Four Layers of the Box Model

A. Padding and Margin Shorthands

These properties can be defined in longhand (specifying each side) or shorthand:

.card {
  /* Margin: 15px Top/Bottom, 20px Left/Right */
  margin: 15px 20px; 
  
  /* Padding: 10px all around */
  padding: 10px; 
  
  /* Border: 2px solid line, dark gray color */
  border: 2px solid #555; 
}

3. Understanding width and height

By default, the width and height properties only refer to the Content area. The total size of the element is the content plus padding and border.

• Default Calculation (content-box):$$\text{Total Width} = \text{Width} + \text{Left Padding} + \text{Right Padding} + \text{Left Border} + \text{Right Border}$$

4. The Crucial box-sizing Property

The default calculation (content-box) is often counterintuitive and makes layout difficult. The modern standard is to use border-box.

• box-sizing: border-box: Tells the browser that the width and height properties should include the Content, Padding, and Border. The margin is still external.

Why border-box is preferred:

When you set width: 100px; and padding: 10px;, the total size remains $100\text{px}$. The $10\text{px}$ of padding is taken out of the content area instead of being added to the total size.

The best practice is to reset the box-sizing model for all elements:

/* Apply this rule universally for predictable layout behavior */
html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit; /* Inherits border-box from html */
}

5. Margin Collapsing

A common source of confusion is Margin Collapsing:

• When the top margin of one block-level element touches the bottom margin of another block-level element, the margins do not add together.
• Instead, they collapse, and the space between the elements is equal to the larger of the two margins.

.top-box {
  margin-bottom: 30px; /* Space needed: 30px */
}

.bottom-box {
  margin-top: 20px; /* Space needed: 20px */
}
/* Result: The space between the boxes is 30px (the larger margin). */