Printed from TeacherJohn.com • http://teacherjohn.com/tutorials/boxmodel.php

CSS Box Model

CSS box model

Note that when using shorthand properties, the order is top, right, bottom, left (clockwise, starting at the top).


Examples

CSS

p {
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
border-top-width: 0;
border-right-width: 0;
border-bottom-width: 0;
border-left-width: 0;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
background-color: yellow;
}

Result

This is a paragraph with zero padding, zero border, zero margin, and a background-color of yellow.


Examples

CSS (using shorthand properties)

p {
padding: 0 0 0 0;
border-width: 0 0 0 0;
margin: 0 0 0 0;
background: yellow;
}

Result

This is a paragraph with zero padding, zero border, zero margin, and a background-color of yellow.


CSS (using shorthand properties)

p {
padding: 0;
border: 0;
margin: 0;
background: yellow;
}

Result

This is a paragraph with zero padding, zero border, zero margin, and a background-color of yellow.


CSS (using some shorthand properties)

p {
padding:0 5px 10px 15px;
border-style: solid dotted dashed double;
border-width: 1px 5px 10px 15px;
border-left-color: red;
margin: 0;
background-color: yellow;
}

Result

This is a paragraph with padding-top of zero, padding-right of 5 pixels, padding-bottom of 10 pixels, padding-left of 15 pixels, border-style-top of solid, border-style-right of dotted, border-style-bottom of dashed, border-style-left of double, border-top-width of 1 pixel, border-right-width of 5 pixels, border-bottom-width of 10 pixels, border-left-width of 15 pixels, border-left-color of red, zero margins, and a background-color of yellow.