Margins Borders and Padding for Dummies

A quick guide to the Box Model

September 4th 2015

In this post we review the Box Model and the major players involved:

Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent

Padding

The CSS padding properties define the space between the element border and the element content. You can define the padding value the following way:

padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;

Border

The CSS border properties allow you to specify the style and color of an element's border.

border-color: The border-color property is used to set the color of the border.
border-style: "Dotted", "dashed", "solid", "double", "groove" and "ridge" are a few of the style options.

Margin

The CSS margin properties define the space around elements. The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent.

You can define the element margin values the following way:

margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;