Skip main navigation

The box model

Video and article discussing CSS and the box model.

This video explains the basic principles and mechanics of CSS. Before you go any further, make sure that you have a basic understanding of cascading style sheets (CSS). After watching the video, think about how CSS makes web design more efficient, especially when you might need to update a page, or create multiple pages with a similar look and feel.

One of the fundamental concepts of CSS is the box model. In CSS, everything has a box around it and these boxes have different parts. Understanding how these boxes work is key to creating layouts and aligning items.

Parts of the box model

The box model has four main parts:

Part Function
Margin This is the outermost part of the box model, wrapping the content, padding, and border as whitespace between this box and other elements. The size of the margin can be controlled using the margin property.
Border This surrounds the content and any padding. Both the size and style of the border is controlled by the border property.
Padding This sits around the content as white space and is controlled by the padding property.
Content This is the region where your content is displayed, which can be sized using properties like width and height.

This diagram shows how the elements of the box model fit together, and where it gets the name:

CSS has two main types of boxes: block boxes and inline boxes. The type of box determines how the box behaves on a page and in relation to other boxes around it.

Let’s take a closer look at both types of boxes before seeing how to control the background and borders.

Block boxes

Block boxes exhibit a few key behaviours. They:

  • break over multiple lines
  • extend to fill the width of their container (filling up to 100% of the space available)
  • respect <width> and <height> properties
  • ‘push’ other items away when you add padding, margins, or borders to the box.

Many elements (including headers, paragraph, and <div> elements) display as a block box by default.

Add this code to JSFiddle and run it to see how block boxes work:

<p>Here is some surrounding text above the block box</p>
<div style=
<h2>An example block box</h2>
<p>This is a block of text inside a block box element.
It uses padding to separate it from the surrounding content.</p>
<p>Here is some surrounding text below the block box</p>

Now try modifying the style attribute values to see how the block behaves in relation to the surrounding text. Resize your browser window after you’ve clicked run. How does the width of the block box react?

Inline boxes

Some elements, including <a>, <span>, and <strong>, display inline by default, therefore they also have inline boxes.

Inline boxes:

  • continue on the same line
  • ignore <width> and <height> properties
  • ‘push’ other items away when you add horizontal padding, margins, or borders
  • don’t push items away when you add vertical padding, margins, or borders.

Now try running this example in JSFiddle:

<p>Here is some surrounding text before the inline box.
<span style=
This is a block of text inside an inline box element. Notice that the
vertical padding doesn't affect the spacing with the surrounding text, but
the margin values do push away the surrounding text horizontally. Even
though there is a width attribute specified, the text uses the full width
of the viewport.
</span>Here is some surrounding text after the inline box</p>

Again, try modifying the attribute values and see how the output changes, or doesn’t change.

The type of box applied to an element is defined by the <display> property. This can be set to <block> or <inline>.

Backgrounds and borders

Now you understand the box model, the first thing we’ll explore is styling the background and borders for these boxes. There are many options for both of these. The following examples highlight some common properties.

Background colour

The <background-color> property defines the background colour of any element. This property accepts a colour value.

  • using keywords (e.g. ‘red’, ‘blue’)
  • using hexadecimal RGB values for specific colours (e.g. #000000, #CC22FF).

Read: This reference guide is a valuable resource for how to control colour through CSS. [1]

You should take care when choosing a background colour. For accessibility, you should ensure that there is contrast between the background and any text placed on top of it.


Borders can be used creatively to style elements on your page. You can control borders using individual properties (e.g. styling the top bar differently to the right bar if you like), or using a special short-hand notation.

The following code specifies a class with a full border and a class with just a top border:

.full {
border-width: 1px;
border-style: solid;
border-color: black;
.top {
border-top-width: 1px;
border-top-style: solid;
border-top-color: black;

In these examples, we have configured the width of the border, described the style of the line (solid), and set the border colour. In addition to these options, you can also round the corners of a border using <border-radius>.

Try for yourself

  • Add the CSS code example to the CSS box in JSFiddle.
  • Create an HTML element that uses one of these border styles.
  • Modify the styles and compare the output. Try changing line colours or line thickness, for example.

Share your experience with your fellow learners in the comments. Do you have any tips to share?


  1. <color> – CSS: Cascading Style Sheets [Internet]. MDN Web Docs; [date unknown]. Available from:
This article is from the free online

Software Development Basics

Created by
FutureLearn - Learning For Life

Reach your personal and professional goals

Unlock access to hundreds of expert online courses and degrees from top universities and educators to gain accredited qualifications and professional CV-building certificates.

Join over 18 million learners to launch, switch or build upon your career, all at your own pace, across a wide range of topic areas.

Start Learning now