The margin CSS shorthand property sets the margin area on all four sides of an element.
Definition and Usage
The margin property sets the margins for an element, and is a shorthand property for the following properties:
- margin-top
- margin-right
- margin-bottom
- margin-left
If the margin property has four values:
- margin: 10px 5px 15px 20px;
- top margin is 10px
- right margin is 5px
- bottom margin is 15px
- left margin is 20px
If the margin property has three values:
- margin: 10px 5px 15px;
- top margin is 10px
- right and left margins are 5px
- bottom margin is 15px
If the margin property has two values:
- margin: 10px 5px;
- top and bottom margins are 10px
- right and left margins are 5px
If the margin property has one value:
- margin: 10px;
- all four margins are 10px
Note: Negative values are allowed.
Values
<length>- The size of the margin as a fixed value.
<percentage>- The size of the margin as a percentage, relative to the inline size (width in a horizontal language, defined by
writing-mode) of the containing block. auto- The browser selects a suitable margin to use. For example, in certain cases this value can be used to center an element.
Good post.