(ix) Learn the margin properties of CSS

Reference:

The margin property is supported by all browsers.

Note: The property value "Inherit" is not supported by any version of Internet Explorer (including IE8).

Definition and usage

The margin shorthand property sets all margin properties in a declaration. This property can have between 1 and 4 values.

Description

This shorthand property sets the width of all margins for an element, or sets the width of the margins on each edge.

The vertical adjacent margins of block-level elements are merged, while the inline elements do not actually occupy the upper and lower margins. The left and right margins of the inline elements are not merged. Similarly, the margins of floating elements are not merged. Allows you to specify a negative margin value, but use caution.

Note: Negative values are allowed.

Example 1

margin:10px 5px 15px 20px;

• Top margin is 10px
• Right margin is 5px
• Lower margin is 15px
• The left margin is 20px

Example 2

margin:10px 5px 15px;

• Top margin is 10px
• Right margin and left margin are 5px
• Lower margin is 15px

Example 3

margin:10px 5px;

• Top margin and bottom margin are 10px
• Right margin and left margin are 5px

Example 4

margin:10px;

• All 4 margins are 10px

value     Description The Auto      browser calculates the margin. Length    Specifies the value of the margin in a specific unit, such as pixels, centimeters, and so on. The default value is 0px. %     Specifies the margin based on the percentage of the parent element's width. Inherit   specifies that margins should be inherited from the parent element. 

Default value: 0

(ix) Learn the margin properties of CSS