Understanding the CSS Box Model

The basic principle underlying web page layout is a concept known as the CSS box model, which regards every HTML element as a box. The position of each box is determined by the flow of the web page—in other words, the order in which the HTML elements appear in the source code. There are two main types of boxes: block-level and inline. A block-level box or element—such as a <div>, heading, or paragraph—normally occupies all available horizontal space, beginning on a line of its own and pushing subsequent elements down onto a new line. On the other hand, an inline box or element—such as a <span> or image—sits ...

Get Beginning CSS3 now with the O’Reilly learning platform.

O’Reilly members experience live online training, plus books, videos, and digital content from nearly 200 publishers.