The margin property is a shorthand used to set each of the four sides instead of using separate properties margin-top, margin-right, margin-bottom, margin-left.
Examples
/* each side separately: top, right, bottom, left */
margin: 10px 20px 10px 20px;
/* top and bottom, left and right */
margin: 2% 5%;
/* set margin to all four sides */
margin: 2em;
/* top | left and right | bottom */
margin: 2em 1em 2em;
The margin property can be defined using one, two, three, or four values. Negative values are invalid.
Properties
| Property | Description |
|---|---|
| margin | defines all margin properties in one declaration |
| margin-top | defines top margin of an element |
| margin-right | defines right margin of an element |
| margin-bottom | defines bottom margin of an element |
| margin-left | defines left margin of an element |
Values
| Value | Description |
|---|---|
| length | sets a margin in px, em, pt, cm, etc. |
| % | sets a margin in percentage of the width of the containing element |
| inherit | used to inherit the value from the parent element |
