How To Set Margin Collapse To P Elements Using CSS

Posted By Bajarangi soft , Posted On 30-10-2020

In CSS Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins.This does not happen on left and right margins! Only top and bottom margins!

How To Set Margin Collapse To P Elements Using CSS

Step 1:Create index.html file and implement as below code in it.

<p class="p1">Hell World.In this demo we are setting margin to p element</>
<p class="p2">Hell World.In this demo we are setting margin to p element</>

Step 2:Implement CSS code as below to set margin collapse.

<style>
    body {
    background: #2e9ad0;
    }
    .p1 {
        margin: 0 0 50px 0;
    }

    .p2 {
        margin: 20px 0 0 0;
    }
</style>

Complete Code For Setting Margin Collapse To P Elements Using CSS.

<!DOCTYPE html>
<html>
<head>
    <title>How To Set Margin Collapse To P Elements Using CSS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
    body {
    background: #2e9ad0;
    }
    .p1 {
        margin: 0 0 50px 0;
    }

    .p2 {
        margin: 20px 0 0 0;
    }
</style>
<body>
<br/><br/>
<div class="container">
    <br><br><br>
    <div class="text-center">
        <h1 id="color" style="color: white;">Set Margin Collapse To P Elements Using CSS</h1>
    </div>
    <br>
    <div class="well">
        <p class="p1">Hell World.In this demo we are setting margin to p element</>
        <p class="p2">Hell World.In this demo we are setting margin to p element</>
    </div>
    <br>
</div>
</body>
</html>