CSS margin:collapse;

Please Share On:

Definition:

CSS margin: collapse property is used to collapse the top and bottom margin and form a single margin.
Left and right margin doesn’t collapse and form a single margin.

Syntax:

margin: 0 0 20px 0;

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .paragraph1{
        border: 2px dashed red;
        background-color: orange;
        text-align:center;
        margin: 0 0 30px 0;
      }
      .paragraph2{
        border: 2px dashed red;
        background-color: pink;
        text-align:center;
        margin: 20px 0 0 0;
      }
    </style>
  </head>

  <body>
    <div class="paragraph1">This paragraph has bottom margin 30px; </div>
    <div class="paragraph2">This paragraph has top margin 20px; </div>
    <div class="description">Here, the first paragraph has bottom margin 30px and second paragraph has top margin 20px. The margin between first and second should be 50px. By adding first paragraph 30px and second paragraph 20px (30px + 20px) but due to margin:collapse, the margin end up only with 30px. And, collapse the 20px margin. This is how margin:collapse.</div>
  </body>
</html>

Output:

try it yourself

Donate to support writers

You may be interested in the following topics:

Post Views: 481

CSS margin:collapse;

Definition:

Leave a Reply Cancel reply

Copyright @2023. All Right Reserved.