Learning PHP, MySQL, JavaScript, and CSS, 2nd Edition

The Box Model and Layout

The CSS properties affecting the layout of a page are based around the box model (see Chapter 19 for more details), a nested set of properties surrounding an element. Virtually all elements have (or can have) these properties, including the document body, whose margin you can (for example) remove with the following rule:

body { margin:0px; }

The box model of an object starts at the outside, with the object’s margin. Inside this there is the border, then there is padding between the border and the inner contents. And finally there’s the object’s contents.

Once you have the hang of the box model you will be well on your way to creating professionally laid-out pages, since these properties alone will make up much of your page styling.

Setting Margins

The margin is the outermost level of the box model. It separates elements from each other and its use is quite smart. For example, assume you have chosen to give a number of elements a default margin of 10 pixels around each. When placed on top of each other this would create a gap of 20 pixels due to adding the border widths together.

To overcome this potential issue, when two elements with borders are positioned directly one above the other, only the larger of the two margins is used to separate them. If both margins are the same width, just one of the widths is used. This way, you are much more likely to get the result you want. But you should note that the margins of absolutely positioned or inline elements ...