CSS box model

Introduction

The CSS box model describes the rectangular boxes that are created for every element in the document tree.

Box model characteristics

Content box

The content box is the invisible box that wraps around the contents.

Padding box

Padding can be applied to the outside of the content box, creating a padding box.

Padding creates space between the edge of the element and its content.

Border box

The border box specifies the width, color and style of a border that is added on top of the outside of padding box.

Background-color

If present, background-color will spread across the entire background area of the box - including under the border box.

Background-image

One or more background-images can be applied on top of the background-color.

Background-images will initially be positioned in the top left corner of the padding-box.

However, background-images, can be positioned anywhere inside and even outside of the background area of the box.

Margin

Margin can be applied to the outside of elements.

Margins create space between the edge of an element and any adjacent elements.

Margin is not included in the calculation of the width of the box model.

Box model sizing

There are three different ways that width and height can be associated with boxes.


1. Boxes can be stretched by default

A box is stretched by default when its default behaviour is to stretch to the full width of the parent container or the viewport.

For example, all block-level boxes stretch by default to the full width of the parent container or the viewport.

However, there are no boxes that stretch to the full height of the parent container or viewport by default.

2. Boxes can be collapsed by default

A box is collapsed by default when its default behaviour is to collapse so that the box is only as wide or tall as the content inside.

For example, inline, inline-block, absolute and float boxes are collapsed by default - they are only as wide or tall as the content inside.

3. Boxes can be sized by authors

Some boxes can be sized by authors using length values to define a width or height.

/* Box sized with length values */
.box {
  width: 200px;
  height: 200px;
}

Some boxes can be sized by authors using percentage values to define a width or height.

/* Box sized with percentage values */
.box {
  width: 100%;
  height: 100%;
}

Some boxes can be stretched by authors using left and right, or top and bottom properties.

/* Box given stretched width */
.box {
  left: 0;
  right: 0
}

/* Box given stretched height */
.box {
  top: 0;
  bottom: 0
}

Additive vs subtractive boxes

The box model can work in one of two ways - using either an additive or subtractive model.

Additive

With the additive model, width or height are applied to the content box, and padding or border are added on top of the overall width.

Let’s use an example of a box that is set to 200px wide, and has 20px of padding on all sides and a 5px wide border on all side.

.example {
  width: 200px;
  padding: 20px;
  border: 5px solid red;
}

This would produce the following additive model:

Subtractive

With the subtractive model, width or height are applied to the border box, so the overall width includes any padding or border.

Using the example above, a subtractive model would produce a very different overall width.

The content area is reduced in width to accommodate the overall width.

Which is used where?

While the subtractive model seems more intuitive, the additive model is the default behaviour in many cases.

However, this depends on whether the box is block, inline or inline-block.

It also depends on whether the box is stretched by default or given a length or percentage width/height.

The box-sizing property

The box-sizing property can be used to a box with an additive or subtractive model.

The content-box value is the default value and applies the additive box-sizing behaviour.

/* Box-sizing */
p {
  box-sizing: content-box;
}

The border-box value applies the subtractive box-sizing behavior.

/* Box-sizing */
p {
  box-sizing: border-box;
}

In recent years, some experts have recommend that box-sizing: border-box should be applied to all elements.

This declaration makes it easier when calculating widths - especially for responsive layouts.

Block boxes

Appearance

Block boxes form visually as blocks; they flow down the page in normal flow.

Default width

By default, block boxes stretch to the width of their containing block or the width of the viewport.

While in this stretched width state, block boxes use a subtractive model for the overall width.

This means that border and padding are included in the overall width.

Length or percentage widths

Block boxes can be given length or percentage widths.

/* Block box with length width */
p {
  width: 200px;
}

/* Block box with percentage width */
p {
  width: 50%;
}

When given a length or percentage width value, block boxes use an additive model for the overall width.

This means that border and padding are added on top of the overall width.

Collapsed width

Block boxes can even be forced to behave like an inline element by setting the display property with the inline value.

/* Collapsing a block element */
p {
  display: inline;
}

This means that the width will collapse to the widest content inside the element.

Default height

By default, the height of block boxes is collapsed.

While in this collapsed height state, block boxes use an additive model for the overall height.

This means that border and padding are added on top of the overall height.

Length height

Block boxes can be given a height using a length value.

/* Block box with length height */
p {
  height: 200px;
}

When a length height is applied, block boxes use an additive model for the overall height.

This means that border and padding are added on top of the overall height.

Percentage height

Block boxes can also be given a height using a percentage value.

/* Block box with percentage height */
p {
  height: 30%;
}

When a percentage height is applied, block boxes use an additive model for the overall height.

This means that border and padding are added on top of the overall height.

Stretched height

Block boxes can also be given a stretched height.

This will make the element’s height stretch in relation to the parent element or the initial containing box.

p {
  position: absolute;
  top: 0;
  bottom: 0;
}

When a stretched height is applied, block boxes use a subtractive model for the overall height.

This means that border and padding are included in the overall height.

Margins

Margins can be applied to all sides of block boxes.

This margin affects elements on any side of the block-level element.

Top and bottom margins will collapse when in contact with other block box margins above or below.

Padding

Padding can be applied to all sides of block boxes.

This padding affects elements on any side of the block-level element.

Border

Borders can be applied to all sides of block boxes.

This border affects elements on any side of the block-level element.

Overflow

Overflow can be applied to block boxes.

Exercise 1: Style some block-level elements

Open this HTML file in an editor:
exercises-start/exercise-208-01.html

Write a CSS rule to set a width of 200px for the element with a class of example1.

/* Add styles here */
.example1 {
  width: 200px;
}

Write a second CSS rule to set a width of 60% for the element with a class of example2.

/* Add styles here */
.example2 {
  width: 60%;
}

Write a third CSS rule to set the element with a class of example3 to display: inline.

/* Add styles here */
.example3 {
  display: inline;
}

Write a fourth CSS rule to set a height of 80px for the element with a class of example4.

/* Add styles here */
.example4 {
  height: 80px;
}

Check your work against the finished HTML file:
exercises-finished/exercise-208-01.html

Inline boxes

Appearance

Inline boxes are distributed in lines. They can also wrap over multiple lines.

Width

By default, the width of inline boxes is collapsed.

Inline boxes can only be given width if their display property is changed to block or inline-block.

Height

By default, the height of inline boxes is collapsed.

Inline boxes can only be given height if their display property is changed to block or inline-block.

Margin

By default, margin can be applied to all sides, but these margins only affect content on left and right sides.

Padding

By default, padding can be applied to all sides, but this padding only affects content on left and right sides.

Border

By default, borders can be applied to all sides. These borders are visible on all side but only affect content on left and right sides.

Overflow

By default, overflow does not apply to inline boxes.

Exercise 2: Style some inline elements

Open this HTML file in an editor:
exercises-start/exercise-208-02.html

Write a CSS rule to set padding of 20px for the element with a class of example1.

/* Add styles here */
.example1 {
  padding: 20px;
}

Write a second CSS rule to set a border of 10px solid red for the element with a class of example2.

/* Add styles here */
.example2 {
  border: 10px solid red;
}

Write a third CSS rule to set a margin of 20px for the element with a class of example3.

/* Add styles here */
.example3 {
  margin: 20px;
}

Write a fourth CSS rule to set a width of 200px for the element with a class of example4.

This width should have no effect on the element as inline elements do not take a width.

/* Add styles here */
.example4 {
  width: 200px;
}

Write a fifth CSS rule to set a height of 50px for the element with a class of example5.

This width should have no effect on the element as inline elements do not take a height.

/* Add styles here */
.example5 {
  height: 50px;
}

Check your work against the finished HTML file:
exercises-finished/exercise-208-02.html

Inline-block boxes

Appearance

Inline-block boxes are distributed in lines like inline boxes. They can also wrap over multiple lines.

However, width, height, margin, border and padding can be applied to inline-boxes like block boxes.

Width

By default, inline-block box width is collapsed. However, the width can be sized or stretched.

Height

By default, inline-block box height is collapsed. The height can be sized and stretched (if given positioning).

Margin

Margin can be applied to all sides of inline-block boxes. This margin affects elements on all sides.

Padding

Padding can be applied to all sides of inline-block boxes. This padding affects elements on all sides.

Border

Border can be applied to all sides of inline-block boxes. This border affects elements on all sides.

Overflow

Overflow can be applied to inline-block boxes.

Exercise 3: Style some inline-block elements

Open this HTML file in an editor:
exercises-start/exercise-208-03.html

Write a CSS rule to set padding of 20px for the element with a class of example1.

/* Add styles here */
.example1 {
  padding: 20px;
}

Write a second CSS rule to set a border of 10px solid red for the element with a class of example2.

/* Add styles here */
.example2 {
  border: 10px solid red;
}

Write a third CSS rule to set a margin of 20px for the element with a class of example3.

/* Add styles here */
.example3 {
  margin: 20px;
}

Write a fourth CSS rule to set a width of 200px for the element with a class of example4.

/* Add styles here */
.example4 {
  width: 200px;
}

Write a fifth CSS rule to set a height of 50px for the element with a class of example5.

/* Add styles here */
.example5 {
  height: 50px;
}

Check your work against the finished HTML file:
exercises-finished/exercise-208-03.html