The CSS box model is the foundation of web page layout. It is essentially a box that wraps around every HTML element. It consists of margins, borders, padding and the actual content such as text images and other elements including block elements.

Parts of the Box Model

• Content - The content of the box containing text and images. Background is transparent. Shows the background color of the element if set.

• Padding - Clears an area around the content. The padding is transparent. Background color is shown if applied to element.

• Border - A border that goes around the padding and content. Has a line style such as solid or dashed, a thickness and color.

• Margin - Clears an area outside the border. The margin is transparent. It does not show the background color if set for the element.

Box properties

Web browsers can preset the box model properties for each element. You then can override them in your own CSS.

The web browser computes the values of the box model for all the elements to render a web page layout.