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