通过移除 `
` 的默认下边距并统一控制 `
- ` 行高，可有效压缩含段落元素的列表项垂直间距，避免过大的空白间隙。
在 HTML 中，<ul> 的 compact 属性早已被废弃（HTML5 中完全移除），无法生效，因此不能依赖它实现紧凑布局。真正影响列表紧凑度的，往往是 <p> 元素自身的默认外边距（尤其是 margin-bottom）以及 <li> 和 <ul> 的行高（line-height）与内边距（padding）。
✅ 正确解决方案
- 清除 <p> 的底部外边距：浏览器为 <p> 默认设置约 1em 的上下外边距，这是导致 <li> 内部“撑开”的主因。只需设置 margin-bottom: 0 即可消除多余间隙；
- 显式设置 <ul> 的 line-height：控制行高可进一步收紧文本行间距，推荐使用像素值（如 18px）或无单位数值（如 1.3）以保证跨字体一致性；
- 避免内联样式堆砌：生产环境建议将样式抽离至 CSS 类，提升可维护性。
✅ 推荐优化后的代码示例：
<ul style="padding-left: 25px; line-height: 1.3;">
<li>
<b class="content">123: </b>
<p class="secondary-content" style="margin: 0;">Lorem</p>
</li>
<li>
<b class="content">456</b>
<p class="secondary-content" style="margin: 0;">ipsum dolor sit</p>
</li>
<li>
<b class="content">789</b>
<p class="secondary-content" style="margin: 0;">amet consecituir or something like that I don't know I don't care</p>
</li>
</ul>? 小贴士：若使用 Bootstrap（如示例中引入的 v5.x），还可借助其工具类进一步简化，例如添加 mb-0（等价于 margin-bottom: 0）和 lh-sm（小行高）：<ul class="ps-3 lh-sm"> <li><b class="content">123: </b><p class="secondary-content mb-0">Lorem</p></li> <!-- 其余项同理 --> </ul>
⚠️ 注意事项
- 不要遗漏 <p> 的 margin-top: 0 —— 虽然 margin-bottom: 0 是关键，但统一设 margin: 0 更稳妥；
- 避免仅靠 line-height 压缩而忽略 margin，否则可能造成文字重叠；
- 若 <li> 内含多段 <p> 或其他块级元素，建议用 display: flex 或 grid 替代纯流式布局，获得更精确的垂直对齐控制。
通过以上调整，即可在不破坏语义结构的前提下，实现真正紧凑、专业且响应友好的列表排版。
