3.0 The box model
CSS is based upon a very handy principle called the Box Model. The easiest way to visualise this is as follows: all HTML element are surrounded by containing boxes, which have properties that can be adjusted using CSS. These properties, working from inside the box to out, are: the content being contained, then padding, border and margin. In addition to this, all elements have four sides: top, right, bottom and left, usually specified in that order. With this simple box model approach, the possibilites regarding page layout and styling are virtually endless.
This may not make much sense just yet, but some of the many elements that can have padding, border and margin applied under the CSS box model include:
- <body>
- <h1>
- <p>
- <ul>
- <ol>
- <li>
- <table>
- <th>
- <td>
- <a>
When you learn how to apply padding, border and margin to these elements and others, you will understand the endless and flexible options CSS offers regarding styling and layout. Taking the humble paragraph tag as an example:
<p>Some lovely content...</p>
This simple tag would have all the properties we have just mentioned:
