0

If I have a <div> with a <p> tag in it and I apply a non-0 padding value to the <div>, the height of the <div> is increased by the font-size of the <p> tag (16px in this case), in addition to the padding. The same applies to the top of the div. What rule explains this behavior?

This came up when I needed to change the padding of an element with 1px bottom padding to 0 and was surprised when the padding was reduced by much more than 1px.

div.container {
    background-color: peachpuff;
    padding: 25px 12px 0 0;
}

div.container.padding-1{
    padding-bottom:1px;
}

p.text{
    text-align: center;
    background-color: limegreen;
    font-size:16px;
}
<div class="container">
    <p class="text">
        Padding bottom 0
    </p>
</div>

<div class="container padding-1">
    <p class="text">
        Padding bottom 1
    </p>
</div>

Box Model:

Sorry if its hard to read, the element content height changes from 50 to 34 when padding is reduced by 1.

enter image description here

chiliNUT
  • 18,989
  • 14
  • 66
  • 106
  • 1
    This feels like a collapsing margin issue, coming from the `p` more than the `div` – j08691 Oct 03 '20 at 22:15
  • If I don't wrap the text in a p I don't see this behavior, so I will investigate adjusting the p's margin, thanks – chiliNUT Oct 03 '20 at 22:18

0 Answers0