Paragraph is not respecting margin of heading

Question

So I am trying to set up vertical rhythm on a page. But p is not respecting bottom margin of h1. Can someone explain me why?

Here is my code (em units would be better but for the sake of simplicity I have used pixels ):

html {
  font - size: 18px;
  line - height: 1.5;
}

h1 {
  font - size: 30px;
  line - height: 1.5;
  margin: 4.5px 0 4.5px;
}

p {
  margin: 27px 0;
}

<body>
  <h1>blaasdfasf</h1>
  <p>...</p>
</body>

Edit:

Here you can see what i mean:

h1 preview

p preview

The margin of h is ignored as you can se.

Is the margin too much or not enough? Please create a fiddle. — EternalHour, Apr 21 '15 at 05:41
If the margins collapse you can decide to switch to padding for one element (if it makes sense) or you can add a 1px height div wich will not allow the margins to collapse — Noel Widmer, Apr 21 '15 at 06:32

score 3 · Answer 1 · edited May 23 '17 at 10:10

It's called "Collapsing margin", and there are a lot of topic about it. Basically the larger margin will count, it's very common. All you can do is increased the larger margin or change you HTML elements. You might like to read:

A good solution is you create a container to the p elements into a div and put it in a padding-top property. With it, the content will have their own margin:

html {
  font-size: 18px;
  line-height: 1.5;
}

h1 {
  font-size: 30px;
  line-height: 1.5;
  margin: 4.5px 0 15px;
    overflow:auto;
}

#margin {
    padding-top:15px;
}

<h1>blaasdfasf</h1>
<div id="margin">
    <p>...</p>
</div>

Or simply apply the padding directly into the p element:

p {
    padding-top:15px;
}

You are welcome. See the edit, I wrote a possible (and clean) solution. — Rafael Almeida, Apr 21 '15 at 06:16

ketan · Answer 2 · 2015-04-21T06:06:48.473

1

Margins collapse between adjacent elements. In simple terms, this means that for adjacent vertical block-level elements in the normal document flow, only the margin of the element with the largest margin value will be honored, while the margin of the element with the smaller margin value will be collapsed to zero.

html {
  font-size: 18px;
  line-height: 1.5;
}

h1 {
font-size: 30px;
line-height: 1.5;
 margin:4.5px 0 4.5px;

}

p {
    margin: 0;
    padding: 0;
}

http://jsfiddle.net/mmokzwnn/3/

Refrence

edited Apr 21 '15 at 06:06

answered Apr 21 '15 at 05:34

ketan

19,129
42
60
98

But i want that margin to be greater than 0. My problem is that `p` is not respecting bottom margin of 'h1'. – David Novák Apr 21 '15 at 05:41
*P is not respecting bottom margin of h1* means actually what optput you want. – ketan Apr 21 '15 at 05:47

Kurenai Kunai · Answer 3 · 2015-04-21T06:28:25.347

1

W3C specification indicates that when the vertical margins of two elements are touching, only the margin of the element with the largest margin value will be honored, while the margin of the element with the smaller margin value will be collapsed to zero. Margin refers to another's element position not including its margins. You can sum padding but not sum margins.

 html {
          font-size: 18px;
          line-height: 1.5;
    }

    h1 {
    font-size: 30px;
    line-height: 1.5;
    margin: 4.5px 0 4.5px;

    }

    p {
    margin: 27px 0;
    padding 0;
    }

Try this jsfiddle

edited Apr 21 '15 at 06:28

answered Apr 21 '15 at 05:41

Kurenai Kunai

1,842
2
12
22

1

W3C specification indicates that when the vertical margins of two elements are touching, only the margin of the element with the largest margin value will be honored, while the margin of the element with the smaller margin value will be collapsed to zero. Margin refers to another's element position not including its margins. You can sum padding but not sum margins. – Kurenai Kunai Apr 21 '15 at 06:02
@kurenaiKunai you might want to include your comment as an edit into your answer. Provides a good explanation of the issue – thomaux Apr 21 '15 at 06:20
1

@Anzeo Sure, will do. – Kurenai Kunai Apr 21 '15 at 06:28

score 0 · Answer 4 · answered Jul 31 '19 at 08:48

This is an old question, but nowadays (in modern browsers ) you can use the display: grid css rule to make elements not overlap margin (see working code example).

div:first-child {
  background-color: red;
}
div {
  background-color: blue;
}
div p {
  background-color: white;
}
.display-grid {
  display: grid;
}

<div>
  <p>Paragraph block</p>
  <p>Paragraph block</p>
  <p>Paragraph block</p>
</div>
<div class="display-grid">
  <p>Paragraph grid</p>
  <p>Paragraph grid</p>
  <p>Paragraph grid</p>
</div>

Paragraph is not respecting margin of heading

4 Answers4