CSS margins

What is margin in CSS?

HTML margin is outside space of the element. It's have four properties as margin-top, margin-right, margin-bottom and margin-left.

How to set margin an element?

margin: 25px;

It will create 25px space around the elements. If you want to control any side then you can go and use any property. Also you can use negative value for the HTML margin as margin-top:-25px;

What is the margin shorthand property?

margin: 10px 25px;

It's mean margin-top: 10px & margin-bottom:10px  and margin-right:25px & margin-left:25px

(Because margin value be start from the margin: top right bottom left;)

Margin syntax is the margin: top right bottom left

What is the margin auto?

Margin collapsing is that if margin value will be "auto" then it will split space around the element. Where we required that any element should be in the center then must margin value should be auto from the both side left and right. But here

must required "width" property because width define that element size.

As examples: section{margin:0 auto; width:500px;}

What is the margin collapse?

margin collapse is the related from the top margin and bottom margin. where we use two elements margin top and bottom then it will not calculate and it will use largest value of the margin.

Margin collapse example:

<style>

    *{ margin: 0; padding: 0;}

    body{ font-family: Arial, Helvetica, sans-serif;}

    .anythingMarginCollapse{margin: 50px auto; max-width:500px ;}

    .anythingMarginCollapse li{margin: 20px 0 40px; padding:5px 10px; background: #eee; border-radius: 5px;

    border:1px solid #ccc; list-style: none;}

</style>

<div class="anythingMarginCollapse">

    <ul>

        <li>What is margin collapse</li>

        <li>margin collapsing</li>

        <li>How to solve margin collapse problem</li>

        <li>what is margin collapsing</li>

        <li>How to work margin collapse</li>

    </ul>

</div>

   

In this example you are seeing that li{margin: 20px 0 40px;} have margin top 20px and margin bottom is 40px. And you will see that result is coming 40px space between two li. Because margin always support largest value of the margin property.

If you want to use both space should be calculate as: margin top value + margin bottom value then you need add two new property in the li element one is the float:left and second is the width:100%; Then you will see result your margin both added 20px + 40px = 60px.

Margin collapse only work with two property float and position:absolute

Also visit for margin collapsing: https://embed.plnkr.co/CDO2wAbplCaOAqhBMkf2/