CSS3 > Margins

Margin in CSS3

How to set margin to the element in CSS3?


Margin

The margin property defines the space around an HTML element. It is possible to use negative values to overlap content.

There are four different margin properties 

  • Margin-Top
  • Margin-Bottom
  • Margin-Left
  • Margin-right

Margin-Top

It provides the space in the top of the margin

 <h2><i>Margin top provides the space in the margin</i></h2>
    <p style="margin-top:50px">TechFunda</p>

In the above code snippet we have defined the margin top with the 30px which provides the 30px space in top of the margin

output

Margin-Bottom

It provides the space in the bottom of the margin

  <h2><i>Margin bottom provides the space in the margin</i></h2>
    <p style="margin-bottom:50px">TechFunda</p>

Margin bottom 

In the above code snippet we have defined the margin bottom with the 30px which provides the 30px space in bottom of the margin

output

Margin-Left

It provides space in the left side

 <h2><i>Margin left provides space in the left</i></h2>
    <p style="margin-left:50px;background-color:blue;">TechFunda</p>

Margin-Left

In the above code snippet we have defined the margin left with 50px which provides the space in the left as 50px

output

Margin-right

It is used to provide the space in the right side of the margin 

  <h2><i>Margin right provides space in the right</i></h2>
    <p style="margin-right:150px;background-color:blue; color:white">TechFunda</p>

Margin-right

In the above code snippet we have defined the margin right with 150px which provides the space in the rightside of the margin

output

Margin

It provides the space with the given values, we can also use all margin properties in an inline style 

   <h2><i>Margin with all properties</i></h2>
    <p style="margin:20px 30px 40px 50px;background-color:pink;color:green">TechFunda</p>

Margin properties

In the above code snippet we have defined margin properties, margin with (20px, 30px, 40px, 50px) defines the margintop, right, bottom, left side

output

 Views: 533 | Post Order: 112



Write for us