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.
<p style="margin:none;background-color:silver">This paragraph has no margin.</p>
<p style="margin:25px;background-color:silver">This has a margin of 25px.</p>
▶ Run the code
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
.set_margin{
margin-top:50px;
margin-right:30px;
margin-bottom:10px;
margin-left:25px;
}
▶ Run the code
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.
.shorthand{
margin: 20px 30px 40px 50px;
}
▶ Run the code