1

Consider the following HTML/CSS:

<div>
    <p>Paragraph #1</p>
    <p>Paragraph #2</p>
    <p>Paragraph #3</p>
</div>

div {
    background-color: gray;
    padding: 0;
}

p {
    margin-top: 1em;
    margin-bottom: 1em;
}

The containing div has no padding, so the top margin of p #1 and the bottom of p #2 are not respected, effectively zero:

Paragraphs with internal margins, but no leading or trailing margins

But now, if we introduce just a smidge of padding to the containing div, these margins are suddenly respected:

div {
    padding-top: 1px;
    padding-bottom: 1px;
}

Paragraphs with leading, trailing, and internal margins

Question:

  1. Why does this behavior make sense? Why do the leading/trailing margins depend at all on the padding? Why don't they simply appear all the time, or not at all?
  2. Is this behavior standard? It seems fairly consistent cross-browser (IE9, Firefox 69.0.3, Chrome 77.0.3865.120).
Gooseberry
  • 652
  • 1
  • 5
  • 13
  • #1 is a good question. I don't remember which parts of margin collapsing the CSSWG has denounced, I don't think it was this part (child margins collapsing out of parent boxes with no borders or padding), but I haven't seen them successfully rationalize it all either. #2 yes it is standard. – BoltClock Oct 21 '19 at 06:17
  • I believe it only makes sense in situations where you don't want to have to zero out the leading and trailing margins if you didn't want them there to begin with. Most word processors actually already do this to leave room for page margins, and CSS margin collapsing was designed with them in mind. That's the best rationale I can come up with for it, and I believe the CSSWG has used the same, now that I think about it, but of course it doesn't explain why the margins reappear when borders or padding are introduced. – BoltClock Oct 21 '19 at 06:19
  • @Gerard: The asker has already discovered using padding as an answer, as described here. They're not asking how to disable margin collapsing, and none of the answers to that question answer what they're asking here. – BoltClock Oct 21 '19 at 06:24
  • @Gerard How is this margin collapsing, though? I thought margin collapsing took the max of the two margins involved. The `div` has `0` margin, and the `p` has `1em` margin. Shouldn't collapse still yield a resultant margin of `1em` in both cases? – Gooseberry Oct 21 '19 at 06:25
  • @Gerard @BoltClock Oops, I see padding prevents collapse. Let me rephrase. Shouldn't collapse still yield a resultant margin of `1em` in the **first** case? – Gooseberry Oct 21 '19 at 06:28
  • 1
    It does; the leading top margin should push the entire div down from where it would otherwise be if the margin was zero. This can be easy to miss; see https://stackoverflow.com/questions/9519841/why-does-this-css-margin-top-style-not-work which contains a similar illusion of the top margin vanishing entirely. – BoltClock Oct 21 '19 at 06:32
  • Ah, yes, I see. The same margin is there in both examples. It is just a matter of whether it is displayed inside or outside the `div`. – Gooseberry Oct 21 '19 at 06:36

0 Answers0