The margin
shorthand property sets the margin for all four sides of a box using one, two, three, or four widths in one abbreviated property. margin
takes the place of the margin-top
, margin-right
, margin-bottom
, and marginleft
properties. The syntax of the margin shorthand property is as follows:
margin: {1,4} | inherit
or:
margin: top right bottom left
where the margin-width value can be a length (px, em, etc.), a percentage, or auto. Here is a minimal example:
div { margin: 1em; }
This CSS rule sets the margin around all divs to 1 em space. You can set all sides of a box to one width and zero out the widths of one or more sides like this:
div { margin: 1em; }
div { margin-bottom: 0; }
The padding shorthand property works exactly like the margin shorthand property discussed earlier.