Web Design and Publishing: Session four

The CSS box model

---

It is important to understand the CSS box model when applying styles.

CSS considers each HTML element to be a box, which consists of:

• content
• padding
• border
• margins

Each element can have its own border, padding and margin settings. The settings for each can be different for the top, right, bottom and left sides of the box.

The box model allows elements to be spaced in relation to other elements, have borders around them, with space between the content and the border.

The image below illustrates the box model:

 

Margin

Margins clear an area around the border, creating distance between the box and other boxes around it, or the edge of the div or page. Margins can be set for all sides at once, or individually for each side. Margins are transparent; the background colour will show through margins.

Border

The border sits between the margin and padding. It is transparent by default, but can be given a style, width and colour to make it visible, to define or decorate the boundaries of the box. As with margins, you can set borders for all sides at once, or for each side individually.

Padding

Padding clears an area between the inside edge of the border and the box's content. Padding takes the background color of the box. As with margins and borders, padding can be set for all sides at once, or for each side individually.

Content

The content of the box, where text and images appear

Width and Height of an Element

It is important to remember that the width and height specified for an element refers to the content area only. To calculate the full size of the element, you must add in the padding, border and margin values.

Adding padding, border and margins

Experiment with adding these properties to the divs in your CSS page layout.

Padding, border and margins are often specified using pixels (px) as the unit of measurement. As you have seen in our example, it is possible to set a margin value in percent (%).

Here's how our example page looks with some padding, margins and a border added:

To add padding to each side of the #nav div individually you could write each declaration individually:

#nav {	color: #FFF;
	background-color:#00A54E;
	width: 28%:
	float: left;
	min-height: 350px;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 20px;
}

Alternatively, you can write:

#nav {	color: #FFF;
	background-color:#00A54E;
	width: 28%:
	float: left;
	min-height: 350px;
	padding: 10px 10px 10px 20px;
}

This shorter method sets padding for all four sides of the box, starting at the top, and working clockwise (top, right, bottom, left), just as the example above, but with less typing.

If values for the top and bottom padding are the same, and for left and right (but different from top and bottom), the declaration can be written:

#nav {	color: #FFF;
	background-color:#00A54E;
	width: 28%:
	float: left;
	min-height: 350px;
	padding: 10px 20px;
}

The declaration above sets the padding top and bottom to 10px, and left and right padding to 20px.

If all four sides are to be the same (in this example, 10px), write this:

#nav {	color: #FFF;
	background-color:#00A54E;
	width: 28%:
	float: left;
	min-height: 350px;
	padding: 10px;
}

This form of abbreviation works in the same way for setting margins.

Setting border properties can be long-winded if each border is to be styled differently, as you have options for style, width and colour. Here styles are set for top and right border (bottom and left borders could be added in the same way):

#nav {	color: #FFF;
	background-color:#00A54E;
	width: 28%:
	float: left;
	min-height: 350px;
	padding: 10px;
	border-top-style: solid;
	border-top-width: 1px;
	border-top-color: #33C;
	border-right-style: dotted;
	border-right-width: 2px;
	border-right-color: #009B8F;
}

These declarations can be shortened to:

#nav {	color: #FFF;
	background-color:#00A54E;
	width: 28%:
	float: left;
	min-height: 350px;
	padding: 10px;
	border-top: solid 1px #33C;
	border-right: dotted 2px #009B8F;
}

Note that there is a space but no punctuation between the style, width and colour values.

If all four borders are to have the same styling, the declaration can be written:

#nav {	color: #FFF;
	background-color:#00A54E;
	width: 28%:
	float: left;
	min-height: 350px;
	padding: 10px;
	border: solid 1px #33C;
}

Remember, you can see the complete list of CSS properties at:
www.w3schools.com/css/css_reference.asp

 

---