如何精简 ul 列表中嵌套 p 元素的垂直间距

通过移除 `

` 的默认下边距并统一控制 `

` 行高，可有效压缩含段落元素的列表项垂直间距，避免过大的空白间隙。

在 html 中，

的 compact 属性早已被废弃（html5 中完全移除），无法生效，因此不能依赖它实现紧凑布局。真正影响列表紧凑度的，往往是

元素自身的默认外边距（尤其是 margin-bottom）以及

• 和
  的行高（line-height）与内边距（padding）。

  ✅ 正确解决方案

  1. 清除

     的底部外边距

     ：浏览器为

     默认设置约 1em 的上下外边距，这是导致

  2. 内部“撑开”的主因。只需设置 margin-bottom: 0 即可消除多余间隙；
  3. 显式设置
     的 line-height

     ：控制行高可进一步收紧文本行间距，推荐使用像素值（如 18px）或无单位数值（如 1.3）以保证跨字体一致性；

  4. 避免内联样式堆砌：生产环境建议将样式抽离至 css 类，提升可维护性。

  ✅ 推荐优化后的代码示例：

     
       123:      
  Lorem
     
     
       456     
  ipsum dolor sit
     
     
       789     
  amet consecituir or something like that I don't know I don't care
     
   

  ? 小贴士：若使用 bootstrap（如示例中引入的 v5.x），还可借助其工具类进一步简化，例如添加 mb-0（等价于 margin-bottom: 0）和 lh-sm（小行高）： 123: Lorem

  ⚠️ 注意事项

  • 不要遗漏

    的 margin-top: 0 —— 虽然 margin-bottom: 0 是关键，但统一设 margin: 0 更稳妥；

  • 避免仅靠 line-height 压缩而忽略 margin，否则可能造成文字重叠；
  • 若
  • 内含多段

    或其他块级元素，建议用 display: flex 或 grid 替代纯流式布局，获得更精确的垂直对齐控制。

  通过以上调整，即可在不破坏语义结构的前提下，实现真正紧凑、专业且响应友好的列表排版。