CSS MARGINS
The margin property is used to specify space around the HTML element.The specified space is transparent and has no background color.
This paragraph has a margin of 50px.
Using this property we can specify top,bottom,left and right margin independently.These are following CSS margin properties.
CSS margin properties
| Property | Description |
|---|---|
| margin | This sets all the value of margin. |
| margin-top | It sets the top margin of the element. |
| margin-right | It sets the right margin of the element. |
| margin-bottom | It sets the bottom margin of the element |
| margin-left | It sets the left margin of the element. |
CSS margin values
| Values | Description |
|---|---|
| auto | Browsers automatically calculate the margin. |
| inherit | It inherits the margin from the parent element. |
| unit/length | It sets margin in px,pt,cm etc. |
| % | It sets the margin using the percentage of width of the container. |
Margin on element
Specifying CSS margin property and its value we can create margin over the element.
Example
Set different margin
We can specify different margin values to different side of the elements by using
- margin-top
- margin-right
- margin-bottom
- margin-left
Example
CSS margin shorthand
Margin shorthand property is used to specify different margins to different sides of an element using just one attribute margin. Example : margin : 20px 30px 40px 50px
The values in shorthand margin are set anticlockwise starting from top=20px, right=30px, bottom=40px and ends at left=50px.
Example