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:

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=
 "background-color:black;color:white;padding:30px;margin:20px;
 width:50%;">
 <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>
</div>
<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=
 "background-color:black;color:white;vertical-padding:30px;margin:50px;
 width=50%;">
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

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?

References

1. <color> – CSS: Cascading Style Sheets [Internet]. MDN Web Docs; [date unknown]. Available from: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value