登录
首页 >  文章 >  前端

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

时间：2026-01-12 09:21:41 286浏览 收藏

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

如何精简包含段落元素的无序列表垂直间距

通过移除 `

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

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

    在 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学习网公众号了解相关技术文章。

相关阅读
更多>
最新阅读
更多>
课程推荐
更多>