通过重置ul的margin和padding清除默认样式，利用CSS盒模型合理设置li的margin控制间距，结合inline-block或flex布局实现垂直与水平排列的精确留白。
在网页布局中，ul li 列表元素的间距控制是常见需求。通过合理使用 margin 和 padding，可以精确调整列表项之间的距离以及它们与容器的留白。理解 CSS 盒模型对实现这些效果至关重要。
盒模型基础与列表元素的关系
CSS 盒模型将每个元素视为一个矩形盒子，包含内容（content）、内边距（padding）、边框（border）和外边距（margin）。对于 ul 和 li 元素来说：
- ul 的 padding 控制列表项整体离容器边缘的距离
- ul 的 margin 常用于清除浏览器默认样式带来的上下空白
- li 的 margin 控制每个项目之间的间隔
- li 的 padding 可以增加文字与边框或背景之间的空间
清除默认样式：重置 ul 的 margin 与 padding
大多数浏览器为 ul 元素设置了默认的 margin 和 padding，尤其在垂直方向和左侧缩进（用于项目符号对齐）。建议一开始就进行重置：
pre {ul {
margin: 0;
padding: 0;
list-style: none;
}
}
这样可以确保列表从干净的状态开始布局，避免意外的空白或错位。
控制 li 之间的垂直间距
若希望每
个列表项之间有固定距离，推荐使用 margin-top 或 margin-bottom 统一设置：
- 给所有 li 添加
margin-bottom: 10px;，最后一个可选地移除底部空白：li:last-child { margin-bottom: 0; } - 或使用
margin-top: 10px;并配合第一个元素不加：li:not(:first-child) { margin-top: 10px; }
这种方式灵活且易于维护，特别适合动态内容。
水平排列时的间距处理
当 li 水平排列（如导航菜单），可通过以下方式控制间距：
- 使用
display: inline-block;并设置margin-right给每个项右侧留空 - 最后一个项去除多余空白：
li:last-child { margin-right: 0; } - 也可用
flex布局配合gap属性更简洁地控制间隔：ul { display: flex; gap: 15px; }
注意 inline-block 元素间的换行可能产生微小空隙，可通过设置父级 font-size: 0; 再重设子元素字体来消除。
