6The CSS box model

The CSS box model is the start of how we layout a web page with columns and grids.

The CSS box model describes how HTML elements are displayed on a web page, this is not in terms of fonts and colours, but in terms of the boxes that are the HTML elements.

The box model is used to determine how the web page is displayed and where the content goes.

In Figure 3.21 (reproduced below as Figure 6.1) I sketched out how I wanted the web page to look. I will use the box model to create this appearance on the web site.

Figure 6.1   Website layout sketch

There are two basic types of HTML elements: block elements such as <p>, <h1> &c. and inline elements such as <em>, <a>, <img> &c.

There is also a third hybrid type, an inline-block element, that has properties from both of the other two:

Block elements always start on a new line on the HTML page and (unless otherwise directed) always span the width of the browser window. Block elements have margins and other dimensional properties applied to them.

The most common HTML block elements are <p>, <h1,2,3...> and <div> (I know we haven’t discussed <div> yet but we will very shortly and it is an element we will use a lot).

Inline elements are exactly what their name describes; they start within a line of another element. They do not start on a newline (think of the <em> tag inserted into the <p> element in § 5.2). Inline elements effectively butt up next to each other until they reach the edge of the browser window and then wrap onto the next line.

Inline elements, do not have dimensional properties such as margins, they simply occupy the space the need to hold the content of the element.

Inline block elements are a mixture of the previous two types of elements, they behave like inline elements in that the butt up next to each other, but they also have some dimensional properties such as margin, width &c.

Inline-block elements are very flexible objects that allow the width of objects such as images to be set to exact values or to occupy the available space.

There are no naturally occurring inline-block elements in HTML; they have to be specifically defined in the CSS file.

Divisions and span elements (<div> and <span>) are HTML elements that act as containers purely for styling purposes.

A <div> is a block-level element that is commonly used to identify a specific group of content, <div>s are used to define a web page’s layout.

A <span> is an inline-level element commonly used to identify smaller groupings of text within a block-level element (such as a paragraph <p>).

We will use <div> and <span> elements a lot on this website and we will generally use them with a class attributes to control the styling.