需求描述
常见于列表的排版，如文章列表、用户列表、商品列表等。
代码实现
<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匹配同辈元素中的最后一个该元素