CSS Box Model - Complete Explanations and Practical Examples

Box Model - The Box Model

The CSS box model is the foundation of web page layout. Every element is essentially a box, which contains content, padding, border, and margin, stacked together like the layers of an onion.

As the browser renders the page, it calculates the styles applied to each box as well as the relationships between all boxes on the page. Before creating CSS layouts, it is essential to fully understand the box model.

Margin

Border

Padding

Content

Every element in a document is structured like a box, with multiple layers that can be adjusted using a set of CSS properties characteristic of the box model, as shown in the image above.

Box Properties

Width and Height – these set the area where the content is displayed. This can be text, images, or other boxes that contain their own content.

☞ There are also other properties that limit dimensions, such as min-width, max-width, min-height, and max-height.

Padding is the space between the content and the inside of the box. It can be set for all four sides simultaneously or individually: padding-top, padding-right, padding-bottom, padding-left.
Border lies between the outer edge of the padding and the inner edge of the margin. By default, it has a width of zero. For visibility, you set the thickness, style, and color (border: 2px solid red;) or individually for each side.

border-top / right / bottom / left – set a single side.
border-width / style / color – set all sides simultaneously.
border-top-width / style / color – individually set a property on a single side.

Margin – the space between boxes; can be set globally or individually (margin-top, margin-right, margin-bottom, margin-left).

☞ Margin collapsing – if two boxes touch, the distance between them equals the largest of the two margins, not the sum.

Some important considerations:

☞ By default, background-color / background-image extends to the border. This can be changed using background-clip.

For content exceeding the visible area, scrollbars appear. This behavior is controlled using overflow.

The height of boxes depends on content, unless a fixed value is explicitly set.

The border property ignores percentage dimensions.

Total width = width + padding-right + padding-left + border-right + border-left. box-sizing helps calculate correctly.

Advanced Box Handling Methods

Beyond modifying width, border, padding, and margin, there are other properties that allow us to change box behavior.

Overflow

When we set the size of a box with absolute values (e.g., width: 500px / height: 300px) and there is more content than available space, the content will "overflow" outside the box. To control such situations, we use the overflow property with one of the accepted values:

auto – if there is too much content, the overflowing part is hidden and scrollbars appear.
hidden – overflowing content is completely hidden.
visible – overflowing content remains visible outside the box (default value).

🔧 CSS Overflow Example

<p class="autoscroll">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   Mauris tempus turpis id ante mollis dignissim. Nam sed
   dolor non tortor lacinia lobortis id dapibus nunc. Praesent
   iaculis tincidunt augue. Integer efficitur sem eget risus
   cursus, ornare venenatis augue hendrerit. Praesent non elit
   metus. Morbi vel sodales ligula.
</p>

<p class="clipped">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   Mauris tempus turpis id ante mollis dignissim. Nam sed
   dolor non tortor lacinia lobortis id dapibus nunc. Praesent
   iaculis tincidunt augue. Integer efficitur sem eget risus
   cursus, ornare venenatis augue hendrerit. Praesent non elit
   metus. Morbi vel sodales ligula.
</p>

<p class="default">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   Mauris tempus turpis id ante mollis dignissim. Nam sed
   dolor non tortor lacinia lobortis id dapibus nunc. Praesent
   iaculis tincidunt augue. Integer efficitur sem eget risus
   cursus, ornare venenatis augue hendrerit. Praesent non elit
   metus. Morbi vel sodales ligula.
</p>

p {
  width  : 400px;
  height : 2.5em;
  margin : 2em auto;
  padding: 1em;
  border : 1px solid black;
}

.autoscroll { overflow: auto; }
.clipped    { overflow: hidden; }
.default    { overflow: visible; }

Background clip

The backgrounds of boxes can consist of colors and/or images, layered on top of each other. By default, the background extends to the outer edge of the border, but this behavior can be adjusted using background-clip, which defines how far the background extends inside the box.

🔧 Background-clip Example

<div class="default"></div>
<div class="padding-box"></div>
<div class="content-box"></div>

div {
  width: 60px;
  height: 60px;
  border: 10px dotted rgba(0, 0, 0, 0.5);
  outline: 5px solid red;
  padding: 20px;
  margin: 20px auto;
  background-size: 140px;
  background-position: center;
  background-image: url("images/background-clip.png");
  background-color: lime;
}

.default {
  background-clip: border-box;
}
.padding-box {
  background-clip: padding-box;
}
.content-box {
  background-clip: content-box;
}

Outline

The outline of a box (outline) is like a border, but it is not part of the box model. It behaves similarly to the border (border), surrounds the box without changing its size, and is drawn outside the box, inside the margin.

☞ Be careful when using the outline property. It is usually used for accessibility purposes, to highlight elements such as links when the user clicks on them or navigates using the Tab key.

The outline is always present on all sides of the box and has the same appearance and thickness on each side.

It differs from the border: it is drawn outside it and can overlap other elements without changing the box's dimensions.

The only impact on surrounding elements is possible overlap.

If an element has an outline, it occupies the same space as if it had no outline.

The outline properties are:

outline-width – specifies the thickness
outline-style – specifies the style
outline-color – specifies the color
outline-offset – specifies the space between the element's edge/border and the outline
outline – shorthand to set all properties at once

CSS Box Types

Everything discussed so far applies to boxes representing block-level elements. CSS also has other types of boxes, with different behaviors.

The type of box applied to an element is specified using the display property.

The main values of the display property are:

block – stacked boxes, occupy a separate line, and can have set dimensions
inline – allows other elements to occupy the remaining line space; set dimensions have no effect, and padding/margin/border affect only text position
inline-block – combines features of inline and block: flows with text but accepts dimensions and retains integrity
none – the element is not displayed

☞ By default, block elements have display: block; and inline elements have display: inline;. This can be changed by declaring another value.

🔧 Basic Display Properties Example

<p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   <span class="inline">Mauris tempus turpis id ante mollis dignissim.</span>
   Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  <span class="block">Mauris tempus turpis id ante mollis dignissim.</span>
  Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  <span class="inline-block">Mauris tempus turpis id ante mollis dignissim.</span>
  Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
</p>

p {
  padding: 1em;
  border: 1px solid black;
  margin: 1em auto;
}

.inline {
  display: inline;
  background-color: #f0f0f0;
}

.block {
  display: block;
  background-color: #d0f0d0;
}

.inline-block {
  display: inline-block;
  background-color: #d0d0f0;
}

🧠 Final Quiz – CSS Box Model

CSS Debugging ➔