Understanding the CSS Box Model

  • David Powers


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 alongside preceding and subsequent inline elements.


List Item Vertical Space Horizontal Space Style Sheet Table Element 
These keywords were added by machine and not by the authors. This process is experimental and the keywords may be updated as the learning algorithm improves.


Unable to display preview. Download preview PDF.

Unable to display preview. Download preview PDF.

Copyright information

© David Powers 2012

Authors and Affiliations

  • David Powers

There are no affiliations available

Personalised recommendations