列表项边框重叠问题：如何添加间距并保留边框

Hey James, 我来帮你搞定这个列表边框重叠的问题～

你遇到的内侧边框变粗的问题，本质是相邻列表项的边框（比如上一项的下边框和下一项的上边框）挨在一起叠加了——两个1px的边框叠起来就变成2px，看起来自然比外侧粗。要保留每个项的边框同时拉开间距，有两种简单好用的方案：

方案1：给列表项加外边距（Margin） #

这是最直观的方法，给每个<li>设置底部外边距，让项与项之间拉开距离，边框就不会重叠了。如果不想最后一个项底部多出来间距，可以单独去掉它的外边距：

/* 给每个列表项设置边框和底部间距 */
.ListView li {
  border: 1px solid #ddd; /* 替换成你原本的边框样式 */
  margin-bottom: 10px; /* 项之间的间距，可根据需求调整数值 */
  /* 可选：加上内边距让内容不贴边框 */
  padding: 8px;
}

/* 去掉最后一个列表项的底部间距，避免容器底部多出空白 */
.ListView li:last-child {
  margin-bottom: 0;
}

方案2：用CSS Grid的Gap属性（更简洁） #

把<ul>改成Grid布局，直接用gap属性设置项之间的间距，不用单独处理最后一个项，代码更干净：

/* 给列表容器设置Grid布局 */
.ListView {
  list-style: none; /* 去掉默认的列表圆点，不需要可以删掉 */
  padding: 0; /* 去掉默认的内边距，避免布局错位 */
  display: grid;
  gap: 10px; /* 项之间的间距，上下左右都会生效 */
}

/* 保留每个列表项的边框 */
.ListView li {
  border: 1px solid #ddd;
  padding: 8px; /* 可选优化：增加内边距提升视觉效果 */
}

两种方案都能完美解决你的问题，选哪个看你的布局习惯～

内容的提问来源于stack exchange，提问作者James