sccc.premiumdw.com

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:

• CSS Box Model | W3 Schools
• Interactive CSS Box Model Demo | RedMelon

The image below illustrates the box model:

http://www.w3schools.com/css/box-model.gif

1. Margins

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

1	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:

1	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:

1	div { padding: 10px; }

See Also: CSS Padding | W3 Schools