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 匹配同辈元素中的最后一个该元素
相关推荐
OEC小胖胖4 小时前
去中心化身份:2025年Web3身份验证系统开发实践
前端·web3·去中心化·区块链
vvilkim5 小时前
Electron 进程间通信(IPC)深度优化指南
前端·javascript·electron
ai小鬼头7 小时前
百度秒搭发布:无代码编程如何让普通人轻松打造AI应用?
前端·后端·github
漂流瓶jz7 小时前
清除浮动/避开margin折叠:前端CSS中BFC的特点与限制
前端·css·面试
前端 贾公子7 小时前
在移动端使用 Tailwind CSS (uniapp)
前端·uni-app
散步去海边7 小时前
Cursor 进阶使用教程
前端·ai编程·cursor
清幽竹客7 小时前
vue-30(理解 Nuxt.js 目录结构)
前端·javascript·vue.js
weiweiweb8887 小时前
cesium加载Draco几何压缩数据
前端·javascript·vue.js
幼儿园技术家7 小时前
微信小店与微信小程序简单集成指南
前端
我不吃饼干9 天前
鸽了六年的某大厂面试题:你会手写一个模板引擎吗?
前端·javascript·面试