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

需求描述

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

代码实现

html 复制代码
    <div class="listBox">
      <div class="itemBox">文章1</div>
      <div class="itemBox">文章2</div>
      <div class="itemBox">文章3</div>
    </div>
css 复制代码
.listBox {
  margin: 20px;
  padding: 10px;
  border: 1px solid black;
  width: 300px;
}
.itemBox {
  padding: 0px 10px;
  line-height: 2;
  background: gainsboro;
  margin-bottom: 10px;
}

此时效果如下

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

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

再加上下方样式即可 !

css 复制代码
.itemBox:last-child {
  margin-bottom: 0px;
}
  • :last-child 匹配同辈元素中的最后一个该元素
相关推荐
@PHARAOH3 分钟前
WHAT - 前端性能指标(交互和响应性能指标)
前端·交互
噢,我明白了5 分钟前
前端js 常见算法面试题目详解
前端·javascript·算法
im_AMBER5 分钟前
Web 开发 30
前端·笔记·后端·学习·web
Jonathan Star9 分钟前
Webpack 打包优化与骨架屏结合:双管齐下提升前端性能与用户体验
前端·webpack·ux
做好一个小前端24 分钟前
后端接口获取到csv格式内容并导出,拒绝乱码
前端·javascript·html
第七种黄昏28 分钟前
前端面试-箭头函数
前端·面试·职场和发展
Youyzq29 分钟前
前端box-shadow出现兼容性问题如何处理
前端
携欢37 分钟前
PortSwigger靶场之将 XSS 存储到onclick带有尖括号和双引号 HTML 编码以及单引号和反斜杠转义的事件中通关秘籍
前端·html·xss
三小河1 小时前
工作中的Ai工具汇总
前端
mapbar_front1 小时前
react项目开发—关于代码架构/规范探讨
前端·react.js