The margin
property defines the space around elements i.e, how much space should be left to the sides.
It is transparent and doesn't have any background color.
You can change the margins of an element one by one for each side or can give all at once using shorthand property.
CSS Margin Properties | Description |
---|---|
margin | It sets a same margin for every side of the element. |
margin-left | It only sets the left margin of an element. |
margin-right | It only sets the right margin of an element. |
margin-top | It only sets the top margin of an element. |
margin-bottom | It only sets the bottom margin of an element. |
This paragraph is displayed with specified margin.
If four values are given: | If three values are given: |
---|---|
margin: 25px 50px 75px 100px; | margin: 25px 50px 75px; |
top margin is 25px | top margin is 25px |
right margin is 50px | left and right margins are 50px |
bottom margin is 75px | bottom margin is 75px |
left margin is 100px |
If two values are given: | If only one value is given: |
---|---|
margin: 25px 50px; | margin: 25px; |
top and bottom margins are 25px | all four margins are 25px |
left and right margins are 50px |
This paragraph is displayed with specified margin.
Value | Description |
---|---|
auto | It lets the browser calculate the horizontal margins. It equally divides the margins from the space available. |
length | It specify a margin in pt, px, cm, etc. |
% | It defines margin in percent values of the width of containing element. |
inherit | It inherits margin from parent element. |
This is a paragraph with an inherited left margin (from the div element).
List of color names supported by all browser »
List of character codes to display special character »
List of all language supported by all browser »
List of Country code supported by all browser »