Borders, Padding, And Margins: The CSS Box Model

When browsers render CSS, they use something called the box model. The box model is broken up into three parts. From the outside in those parts are:

I'll start with the border first.

Short-hand Expressions

All of the above groups of properties include declarations that affect only the top, right side, bottom, or left side, and a property that allows all sides to be expressed with a declaration that affects all sides at once.

Those that affect a single side have -top, -right, -bottom, or -left somewhere in the property name.

If the side is not specified, then the declaration affects all sides. You may use anywhere from one to four values, which apply like so:

How The Number Of Values Affects Which Sides Are Controlled
Number of Values Which Values Which Side
One First Top
Right
Bottom
Left
Two First Top
Bottom
Second Right
Left
Three First Top
Second Right
Left
Third Bottom
Four First Top
Second Right
Third Bottom
Fourth Left

The Border

The border is a line around the elements' content. When a border is not specified, it has a width of 0, and is thus invisible.

There are several properties dealing with borders. You can set each aspect of the border on each side individually using the following properties:

There are some simple shorthand properties as well, which I'll explain shortly.

Border Width

Properties:
  • border-top-width
  • border-right-width
  • border-bottom-width
  • border-left-width
Default value:medium
Inherited:No

This can be set to a specific length or to any of the following:

thin
1 pixel
medium
3 pixels
thick
5 pixels

Border Colours

Properties:
  • border-top-color
  • border-right-color
  • border-bottom-color
  • border-left-color
Default value:The value of the color property.
Inherited:No

A border can be set to any colour. Borders may also be set to transparent.

Border Style

Properties:
  • border-top-style
  • border-right-style
  • border-bottom-style
  • border-left-style
Default value:none
Inherited:No

The type of border you want is also important. You have the following options:

solid
A solid line
double
Two solid lines, one outside the other. Their combined width plus the space between equals the value you set as the width. The width must be 3 pixels or more to see this as a double line, otherwise it looks like a solid border.
dotted
The border is a series of dots.
dashed
The border is a dashed line.
groove
The border looks like a groove on the webpage. The width must be 2 pixels or more to see this as a groove, otherwise it looks like a solid border.
ridge
The border looks like a ridge on the webpage. The width must be 2 pixels or more to see this as a ridge, otherwise it looks like a solid border.
inset
The border makes the element look like it's sunk into the page.
outset
The border makes the element look like it is rising out of the page.

Shorthand Border Notation

You can set each aspect of the border so that they apply to all sides at once (as described in Short-hand Expressions earlier in this chapter) using the following properties:

You may also lump style, width, and colour into a single declaration for each side with these properties:

In this case, you would state the width, style, and colour of the border. The first four apply to only one side, the fifth creates a uniform border all around. The width, style, and colour must all be included in each declaration, but may go in any order.

The webpage below not only demonstrates the borders, but also demonstrates the shorthand notation mentioned in the introduction to this chapter.

Paragraphs with borders

And here is the stylesheet:

The Stylesheet Controlling The Borders
/* Note that the border property below applies to the border on ALL sides. */
#p_1{
border:4px solid purple;
padding:5px;
}
/* NOTE:
The first declaration in this rule has two values, colouring the top and bottom borders green, and the left and right borders blue.
The second declaration has three values, setting the top border to "solid", the left and right borders to "double", and the bottom border to "dashed".
The third declaration has four values, setting the top border to a thickness of 10px, the right border to 7px, the bottom border to 1px and the left border to 5px.
*/
#p_2{
border-color:green blue;
border-style:solid double dashed;
border-width:10px 7px 1px 5px;
}

The Padding

Properties:
  • padding-top
  • padding-right
  • padding-bottom
  • padding-left
  • padding
Default value:0 (all padding properties)
Inherited:No (all padding properties)

Padding creates a space between the content of an element and the border. It is expressed as a length or as a percentage of the element's width.

The padding property allows you to define the padding of the four sides in a single declaration, as described above.

Paragraphs. One with padding, one without.

And the style sheet of the above:

The Stylesheet Giving Padding To The First Paragraph
p{border:1px solid black;}
#p_1{padding:5px 20px;}

The Margin

Properties:
  • margin-top
  • margin-right
  • margin-bottom
  • margin-left
  • margin
Default value:0
Inherited:No (all margin properties)

The margin is the space between the border and the rest of the page. It is expressed as a length or as a percentage of the element's width.

The margin property allows you to define the margin of the four sides in a single declaration, as described above. Unlike borders and paddings, a margin may be set to a negative length.

Paragraphs, demonstrating margins.

Below is the style sheet for the above page:

The Stylesheet Demonstrating Margins
p{
border:3px solid blue;
padding:5px 40px;
margin:10px;
}
#p_2{margin: 10px 30px;}
#p_3{margin: 10px -30px;}