The Box Model and HTML5 Semantic Elements

This chapter aims to highlight fundamental aspects of working with dimensions in design, and strengthen your understanding of how the sizes of elements (and the negative space around them) can be adjusted. These skills will assist with your ability to control spacing and layout. This chapter will also introduce a number of HTML5 structural elements that can be used to semantically describe the role that elements onscreen play within the larger document.

<aside> <img src="/icons/list_purple.svg" alt="/icons/list_purple.svg" width="40px" />

Learning objectives

By the end of this chapter you will:

• understand the principles of the “box model”
• understand the difference between content areas, padding, borders, and margins
• be able to alter box-sizing properties to work with dimensions in different ways
• be familiar with HTML5 semantic elements
• understand the importance of using semantic elements. </aside>

The Box Model

The box model in web design is an important way to explain how every element on a web page is treated as a rectangular box, and dictates how elements are structured (and interact with each other) in the layout. Understanding the box model is important for designing and laying out web pages effectively. It consists of four main components:

1. Content: The innermost part of the box where text, images, or other media are displayed. The dimensions of the content area can be controlled using the width and height properties.
2. Padding: The space between the content and the border. Padding is inside the border of the box and is often used to give the content inside the box some breathing room. Unlike margins (defined below), padding is considered part of the box itself, so the background colour or image of the box extends into the padding area.
3. Border: Surrounds the padding (if any) and content. It's a line that wraps around the padding and content, and its style, width, and colour can be controlled using CSS. The border is part of the total visible box, affecting its overall size.
4. Margin: The outermost layer that handles the space between the box and adjacent elements. Margin does not have a background colour; it is completely transparent. The margin is the space outside the border, used to create distance between different elements on the page.

We’ve likely touched on a bunch of these words in class discussions/examples.

Some browsers' web inspectors (or developer tools) show a pictorial representation of the box model like this:

The Box Model: An illustration of the dimensions taken up by an HTML element. Content dimensions are shown in blue, padding is listed in green, border in yellow ochre, and margin in orange tan. The size of an element typically consists of the sum of these values.

When you hover over the element in the web inspector's 'Elements' view, it is highlighted in your browser like this:

Colour overlays depicting aspects of the Box Model: Semi-transparent overlays over the rendered content, highlight content dimensions in blue, padding in green, border in yellow ochre, and margin in orange tan.

… visually illustrating (by use over colour overlay) that the width and height of an element is the combination of margins, borders, padding, and content width/height.

How it Influences Layout

The box model directly relates to the layout of a webpage because it determines the total size and spacing of elements. When calculating the space that an element occupies, you need to consider the sum of its margin, border, padding, and the actual content. This calculation is essential when you are trying to fit multiple elements within a specific area or when you're trying to precisely control the spacing between elements.