Skip to main content

CSS Box Model – Explained with Examples

A CSS box model consists of some set of boxes wrapped around an HTML element for styling purposes.

Parts of a CSS Box Model​

The four (4) boxes that make up a CSS box model are:

  • Margin box
  • Border box
  • Padding box
  • Content box

Here's an illustration:

Anatomy of a CSS box model

CSS box model comprises of four boxes

The four boxes that make up a box model make it easy to create complex designs with CSS. Let's discuss these boxes below.

What Is a Content Box?​

A content box is the innermost part of a box model. It is where an HTML element's content appears.

What Is a Padding Box?​

A padding box is a transparent space around the content of a box model.

We use padding to separate the box model's content from its border.

tip

Use the CSS padding property to specify the size of your padding box.

What Is a Border Box?​

A border box is a strip of line that typically wraps the padding. But suppose you omit the padding. In that case, the border will wrap the content.

We use the CSS border property to specify the width, color, and style of an HTML element's border.

info

HTML elements have no border by default. In other words, the border property's value of all HTML elements is typically none.

What Is a Margin Box?​

A margin box is the transparent outermost edge of a box model.

The main function of a margin box is to separate a box model from other box models.

tip

Use the CSS margin property to specify the size of your margin box.

Example: A <div> Element's Box Model Demonstration​

div {
  margin: 50px;
  border: 20px solid purple;
  padding: 10px;
  background-color: orange;
  width: 200px;
  height: 150px;
}

Try it on StackBlitz

The snippet above specified three properties that we have not discussed: background-color, width, and height—so, let's talk about them below.

What Is a CSS background-color Property?​

A CSS background-color property defines the color of an HTML element's background.

info

An element's background, by default, constitutes the background of the content, padding, and border boxes. But you can specify your preference with the background-clip property.

What Is a CSS width Property?​

A CSS width property defines the width of an HTML element.

What Is a CSS height Property?​

A CSS height property defines the height of an HTML element.

Important Stuff to Know about the width and height Properties​

By default, the CSS width and height properties set the content box's width and height.

But suppose you want the width and height properties to refer to an HTML element's border—not its content. In that case, set the box-sizing property's value to border-box.

Example: box-sizing Configured to Make the width and height Reference the Border Box​

#first-div {
  margin: 25px;
  border: 17px solid rgba(0, 0, 0, 0.75);
  padding: 30px;
  background: PeachPuff
    url("https://cdn.pixabay.com/photo/2012/04/01/16/39/turkey-23437_1280.png")
    center/contain no-repeat padding-box border-box local;
  width: 400px;
  height: 300px;
  box-sizing: border-box;
}

Try it on StackBlitz

The background property is a shorthand for the following properties:

note

Whenever you specify a background-size property, use a slash (/) to separate it from the background-position—for instance, left center/3.5rem.

Overview​

This article discussed what a CSS border box is. We also used examples to see how it works.

Your support matters: Buy me a coffee to support CodeSweetly's mission of simplifying coding concepts.

Tweet this article