0

Given the block container with { padding: 20px; padding-bottom: 0; } and inner block elements with { margin-bottom: 30px; }. For some reason the last element's margin is not counted when calculationg container block's height. Why does it happen? Adding border to container element, or changing padding-bottom to 1px fixes the problem. But, again, why? There's such thing like margin collapse, but I've never heard of padding-margin collapse.

enter image description here

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
  </head>
  <style>
    .container {
      padding: 20px;
      padding-bottom: 0;
    }
    .content {
      margin-bottom: 30px;
    }
  </style>
  <body>
    <div class="container">
      <div class="content">1</div>
      <div class="content">2</div>
      <div class="content">3</div>
    </div>
  </body>
</html>
bapafes482
  • 444
  • 4
  • 18
  • @AnuragSrivastava No.It's not related to inline elements. – bapafes482 Mar 23 '20 at 16:45
  • Well, you specifically took out the padding on the bottom with `padding-bottom: 0`, so there’s no padding-margin collapse. It’s just regular margin collapse. – Ry- Mar 23 '20 at 17:20
  • 1
    from the duplicate *Collapsing margins between parent and child elements*--> your last child margin is collapsing with the parent margin since there is no border,padding between them. More details here: https://www.w3.org/TR/CSS2/box.html#collapsing-margins – Temani Afif Mar 23 '20 at 19:55

0 Answers0