HCDE532 » The Box Model

In order to set the width and height of an element correctly in all browsers, you need to know how the box model works.

  • All HTML elements can be considered as boxes. In CSS, the term “box model” is used when talking about design and layout.
  • The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.
  • The box model allows us to place a border around elements and space elements in relation to other elements.

See Also:

The image below illustrates the box model:



1. Margins

Clears an area around the border. The margin does not have a background color, it is completely transparent:

Select Code
div { margin: 10px; }

See Also: CSS Margin | W3 Schools

2. Border

A border that goes around the padding and content. The border is affected by the background color of the box:

Select Code
div { border: 1px solid black; }

See Also: CSS Border | W3 Schools

3. Padding

Clears an area around the content. The padding is affected by the background color of the box:

Select Code
div { padding: 10px; }

See Also: CSS Padding | W3 Schools


This portion of the Premium Design Works website is written by Mike Sinkula for the Web Design & Development students at Seattle Central College and the Human Centered Design & Engineering students at the University of Washington.

Leave a Comment:

Don't forget to get your Globally Recognized Avatar.