Comparing padding, border and margin in CSS
From inside out you have the content element, the padding, the border and then the margin.
The differences between padding, border and margin can be best described by the below illustration. This box model is extremely useful and can be applied to every element on a page.
I will explain the functions of each from the inside out;
The padding can have the same color as the element or content.
The table below shows how the padding can be labeled with one to four values (from from http://www.w3schools.com/css/css_padding.asp);
The padding property can have from one to four values.
- top padding is 25px
- right padding is 50px
- bottom padding is 75px
- left padding is 100px
padding: 25px 50px 75px 100px;
- top padding is 25px
- right and left paddings are 50px
- bottom padding is 75px
padding: 25px 50px 75px;
- top and bottom paddings are 25px
- right and left paddings are 50px
padding: 25px 50px;
- all four paddings are 25px
padding: 25px:
The border of an element frequently has a border style.
Borders can be solid, dotted, dashed, double, groove, ridge, inset and outset. You can set the following self explanatory elements to a border, usually using pixels as a value; border-top-width, border-right-width, border-bottom-width, border-left-width and, border-color.HTML dog has some wonderful examples. Click below to see examples illustrating the various kinds of borders.
http://www.htmldog.com/examples/borders.html
The last element, the margin is completely transparent.
The margin does not have a background color, it is completely transparent and gives space between the various elements. The margin is the distance from each element to the next. Or if you imagine it is like a piece of paper and it is the space from the edge of the paper to the next element. It can be labeled as such:
body {
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}
or in the equivalent on one line
body {
margin: 100px 40px 10px 70px:
}
Check out the total measurements of a complete element with calculations below (from http://www.w3schools.com/css/css_boxmodel.asp);
The total width of the element in the example below is 300px:
width: 250px;
padding: 10px;
border: 5px solid gray;
margin: 10px;
so if we do the math
250px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 20px (left + right margin)
= 300px
There is a lot of good information out there and below are some links;
http://www.impressivewebs.com/difference-between-margins-padding-css/
http://www.htmldog.com/guides/css/beginner/borders/