CODEWITHSUNDEEP
htmlcssmargin
user2690527
user2690527

Reputation: 1881

Why do vertical margins not collapse?

Consider the following MWE

<!doctype html>
<html>
<style>
  div.compact-inverse {
    border: 1px solid black;
  }

  div.compact-inverse > input {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 12px 0;
  }
  
  div.compact-inverse > label {
    display: inline;
    margin: 12px 0;
    padding-left: 18px;
    border: 1px solid red;
    background-color: pink;
  }
  
  div.compact-inverse > p {
    display: block;
    margin: 12px 0;
    padding-left: 34px;
    border: 1px solid blue;
    background-color: cyan;
  }
</style>
<body>
  <form>
    <div class='compact-inverse'>
      <input type='checkbox' name='delete_imported' /><label>Delete originals</label>
      <p>Original files will be deleted after the import when possible.</p>
    </div>
  </form>
</body>
</html>

As you can see from the screenshot, the vertical margin between the first row (input with label) and the second row (p) is not collapsed but stacked.

enter image description here

Why?

Upvotes: 2

Views: 152

Answers (1)

Quentin
Quentin

Reputation: 943569

From the specification:

Adjoining vertical margins collapse

and

Two margins are adjoining if and only if … both belong to in-flow block-level boxes that participate in the same block formatting context

The label and input are inline elements. They don't generate block-level boxes.

Upvotes: 2

Related Questions