CSS MARGINS

❮ Prev Next ❯

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

❮ Prev Next ❯