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.


Chrome Veri Padding 


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