CSS Box Model

CSS Box Model

The CSS box model explains how the browser calculates the size and spacing of every HTML element.

You can imagine each element as a rectangular box made of four layers:

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

.card {
  width: 300px;
  padding: 20px;
  border: 2px solid blue;
  margin: 30px;
}

Understanding these layers helps you control the layout and avoid unexpected sizing problems.

Content Area

The content area is the innermost part of the box. It contains text, images, or other elements.

.box {
  width: 200px;
  height: 100px;
}

By default, width and height define the size of this content area.

Padding Area

Padding creates space between the content and the border.

.box {
  padding: 20px;
}

Important points:

• Padding is inside the element.
• The element's background extends through the padding.
• Padding cannot have negative values.
• You can control each side separately.

.box {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
}

Border Area

The border surrounds the content and padding.

.box {
  border: 3px solid green;
}

A border can have a width, style, and colour.

.box {
  border-width: 3px;
  border-style: dashed;
  border-color: orange;
}

Common border styles include solid, dashed, dotted, and double.

Margin Area

Margin creates space outside the border. It separates the element from nearby elements.

.box {
  margin: 25px;
}

Unlike padding:

• Margin is outside the element.
• The background does not cover the margin.
• Margin can use negative values.
• margin: auto can centre a fixed-width block horizontally.

.container {
  width: 800px;
  margin: 0 auto;
}

Calculating the Total Size

By default, padding and borders are added to the declared width and height.

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
}

The total width is calculated as:

• Content width: 200px
• Left and right padding: 40px
• Left and right border: 10px
• Total width: 250px

Margins create additional outer space but are not part of the element's visible width.

Using box-sizing

The box-sizing property controls how the browser calculates an element's size.

With the default content-box, padding and borders are added to the width:

.box {
  box-sizing: content-box;
  width: 200px;
  padding: 20px;
}

With border-box, the declared width includes the content, padding, and border:

.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid black;
}

The total width remains 200px, making layouts easier to manage.

A common rule is:

* {
  box-sizing: border-box;
}

Using the Box Model with CSS Selectors

Selectors decide which elements receive box-model styles.

/* Universal selector */
* {
  box-sizing: border-box;
}

/* Element selector */
section {
  padding: 20px;
}

/* Class selector */
.card {
  margin: 15px;
}

/* ID selector */
#main-content {
  width: 90%;
}

/* Attribute selector */
input[type="text"] {
  padding: 10px;
  border: 1px solid gray;
}

/* Pseudo-class selector */
button:hover {
  border-width: 2px;
}

/* Pseudo-element selector */
.title::after {
  content: "";
  display: block;
  margin-top: 8px;
  border-bottom: 2px solid blue;
}