css实战——清除列表中最后一个元素的下边距

需求描述

常见于列表的排版，如文章列表、用户列表、商品列表等。

代码实现

<div class="listBox">
      <div class="itemBox">文章1</div>
      <div class="itemBox">文章2</div>
      <div class="itemBox">文章3</div>
    </div>

.listBox {
  margin: 20px;
  padding: 10px;
  border: 1px solid black;
  width: 300px;
}
.itemBox {
  padding: 0px 10px;
  line-height: 2;
  background: gainsboro;
  margin-bottom: 10px;
}

此时效果如下

最后一个元素的下边距导致列表与页面的下边距过大！

怎样清除列表中最后一个元素的下边距呢？

再加上下方样式即可 ！

.itemBox:last-child {
  margin-bottom: 0px;
}

• :last-child 匹配同辈元素中的最后一个该元素