6The CSS box model

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

The CSS box model de­scribes how HTML el­e­ments are dis­played on a web page, this is not in terms of fonts and colours, but in terms of the boxes that are the HTML el­e­ments.

The box model is used to de­ter­mine how the web page is dis­played and where the con­tent goes.

In Figure 3.21 (re­pro­duced below as Fig­ure 6.1) I sketched out how I wanted the web page to look. I will use the box model to cre­ate this ap­pear­ance on the web site.

Figure 6.1   Website layout sketch

There are two basic types of HTML el­e­ments: block el­e­ments such as <p>, <h1> &c. and in­line el­e­ments such as <em>, <a>, <img> &c.

There is also a third hy­brid type, an in­line-block el­e­ment, that has prop­er­ties from both of the other two:

Block el­e­ments al­ways start on a new line on the HTML page and (un­less oth­er­wise di­rected) al­ways span the width of the browser win­dow. Block el­e­ments have mar­gins and other di­men­sional prop­er­ties ap­plied to them.

The most com­mon HTML block el­e­ments are <p>, <h1,2,3...> and <div> (I know we haven’t dis­cussed <div> yet but we will very shortly and it is an el­e­ment we will use a lot).

In­line el­e­ments are ex­actly what their name de­scribes; they start within a line of an­other el­e­ment. They do not start on a new­line (think of the <em> tag in­serted into the <p> el­e­ment in § 5.2). In­line el­e­ments ef­fec­tively butt up next to each other until they reach the edge of the browser win­dow and then wrap onto the next line.

In­line el­e­ments, do not have di­men­sional prop­er­ties such as mar­gins, they sim­ply oc­cupy the space the need to hold the con­tent of the el­e­ment.

In­line block el­e­ments are a mix­ture of the pre­vi­ous two types of el­e­ments, they be­have like in­line el­e­ments in that the butt up next to each other, but they also have some di­men­sional prop­er­ties such as mar­gin, width &c.

In­line-block el­e­ments are very flex­i­ble ob­jects that allow the width of ob­jects such as im­ages to be set to exact val­ues or to oc­cupy the avail­able space.

There are no nat­u­rally oc­cur­ring in­line-block el­e­ments in HTML; they have to be specif­i­cally de­fined in the CSS file.

Di­vi­sions and span el­e­ments (<div> and <span>) are HTML el­e­ments that act as con­tain­ers purely for styling pur­poses.

A <div> is a block-level el­e­ment that is com­monly used to iden­tify a spe­cific group of con­tent, <div>s are used to de­fine a web page’s lay­out.

A <span> is an in­line-level el­e­ment com­monly used to iden­tify smaller group­ings of text within a block-level el­e­ment (such as a para­graph <p>).

We will use <div> and <span> el­e­ments a lot on this web­site and we will gen­er­ally use them with a class at­trib­utes to con­trol the styling.