如何用CSS控制div内列表中同一列表项的行间距？

嘿，我来帮你搞定这个问题！你要调整的是单个列表项内部多行文本之间的垂直间距，对吧？最直接好用的CSS属性就是 line-height，另外如果列表项里包含了其他块级元素，也可以用 margin 或 padding 来辅助调整，下面具体给你讲：

• 核心属性：line-height
  这个属性专门用来控制文本行之间的垂直距离，也是最适合你需求的选项。你可以给列表项（比如 <li> 元素）直接设置这个属性，支持多种取值方式：

  • 倍数取值（推荐）：比如 line-height: 1.6;，它会基于当前字体大小自动计算行高，适配性更强；
  • 固定像素值：比如 line-height: 24px;，适合需要固定行高的场景；
  • 百分比：比如 line-height: 160%;，效果和倍数类似，但优先级稍有不同。

  举个实际代码例子：

  /* 给所有列表项设置行间距 */
  li {
    line-height: 1.8; /* 让行间距更宽松，阅读体验更好 */
  }
  

• 针对列表项内块级元素的补充调整
  如果你的列表项里还嵌套了 <p>、<div> 这类块级元素，想要调整这些元素之间的间距，可以用 margin 或 padding：

  /* 调整列表项内p元素的上下间距 */
  li p {
    margin: 0.5em 0;
    /* 或者用 padding: 0.5em 0; 根据需求选 */
  }
  

简单总结下：如果只是纯文本行的间距，line-height 就足够了；如果有嵌套块元素，再配合 margin/padding 就能完美控制啦！

内容的提问来源于stack exchange，提问作者edbird88