无序列表垂直间距怎么调？

文章不知道大家是否熟悉？今天我将给大家介绍《如何精简无序列表垂直间距》，这篇文章主要会讲到等等知识点，如果你在看完本篇文章后，有更好的建议或者发现哪里有问题，希望大家都能积极评论指出，谢谢！希望我们能一起加油进步！

通过移除 `

` 元素默认下边距并统一控制 `

` 行高，可有效压缩嵌套段落的 `
• ` 项垂直间距，避免过大的空白区域。

  在 HTML 中，

  的 compact 属性早已被废弃（HTML5 不支持），无法实现预期的紧凑布局。真正影响列表项垂直密度的，往往是

  标签自身的默认外边距（尤其是 margin-bottom）以及行高（line-height）继承关系。

  要实现更紧凑的

  列表（尤其当每个
  • 内含

    时），推荐以下组合方案：

    ✅ 核心策略：

    • 移除

      的底部外边距（margin-bottom: 0），消除段落间冗余空白；

    • 显式设置
      的 line-height（如 18px 或 1.2），确保行高可控且一致；
      • 弃用已废弃的 compact 属性，改用现代 CSS 控制；
      • 如需进一步微调，可对
      • 设置 margin-bottom: 0 或 padding-bottom: 0。

      ? 示例优化代码：

      <ul style="padding-left: 25px; line-height: 1.2;">
        <li>
          <b class="content">123: </b>
          <p class="secondary-content" style="margin-bottom: 0;">Lorem</p>
        </li>
        <li>
          <b class="content">456</b>
          <p class="secondary-content" style="margin-bottom: 0;">ipsum dolor sit</p>
        </li>
        <li>
          <b class="content">789</b>
          <p class="secondary-content" style="margin-bottom: 0;">amet consecituir or something like that I don't know I don't care</p>
        </li>
      </ul>

      ? 进阶建议：

      • 避免内联样式，推荐将规则提取至 CSS 类中，例如：

        .compact-list { padding-left: 25px; line-height: 1.2; }
        .compact-list p { margin-bottom: 0; }

      • 若使用 Bootstrap（如示例中引入的 v5.x），注意其 .p-* 工具类（如 mb-0）可直接替代内联 margin-bottom: 0；
      • 检查是否受父容器 font-size 影响——line-height 若设为无单位数值（如 1.2），会基于当前字体大小计算，更具备响应性。

      ⚠️ 注意事项：
      不要依赖 compact 属性或仅调整

      的 margin/padding —— 它们无法解决

      自带的块级外边距问题。真正的紧凑感来自对子元素（特别是

      ）的精准重置。

      文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《无序列表垂直间距怎么调？》文章吧，也可关注golang学习网公众号了解相关技术文章。