Margin bottom of last item on a list of items

Question

I'm creating a list of items, and I found something weird:

In a list of items, where each item has a margin bottom, the margin-bottom of the last item overflows the parent element except if the parent element has a border.

.Item {
  display: inline-block;
}

.Parent1 {
  border: 1px solid black;
}

.Parent2 {
  outline: 1px solid black;
}

.Child {
  height: 15px;
  width: 30px;
  margin-bottom: 15px;
  border: 1px dashed black;
}

<div class="Item">
  <h2>With border</h2>
  <div class="Parent1">
    <div class="Child">a</div>
    <div class="Child">b</div>
    <div class="Child">c</div>
  </div>
</div>
<div class="Item">
  <h2>With outline</h2>
  <div class="Parent2">
    <div class="Child">a</div>
    <div class="Child">b</div>
    <div class="Child">c</div>
  </div>
</div>

I can't figure out the reason of this behaviour. I can fix it with overflow: auto, but I'm looking for a proper explanation of this issue.

Does this answer your question? [Difference between outline and border](https://stackoverflow.com/questions/1158515/difference-between-outline-and-border) Also, if you use developer tools and hover last child you will see the margin is there! It's just not taking up the space with the "outline" property — caramba, Feb 23 '20 at 20:39
No, this page doesn't answer my question. Also your comment about «the margin is there» doesn't explain the behaviour of the last element. Please provide further details. — Emille C., Feb 23 '20 at 20:42
Does this answer your question? [Child margin doesn't affect parent height](https://stackoverflow.com/questions/27829250/child-margin-doesnt-affect-parent-height) adding `overflow: auto;` as mentioned there to the parent seems to work => https://jsfiddle.net/xu9nq43c/ — caramba, Feb 23 '20 at 20:52

Margin bottom of last item on a list of items

0 Answers0