Margin in CSS3

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

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

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>

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

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>

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

output

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>

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

output

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>

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: 3589 | Post Order: 112