每行 header 之间的间距

Question

我正在尝试在 header 的每行之间添加间距。有些字母似乎重叠，而另一些则非常接近下一行。我尝试添加 padding 但这是在整个文本而不是每一行周围添加填充。任何帮助将不胜感激。

Answer 1

你可以使用无序列表来做类似的事情。我强烈建议不要使用常规文本，因为我相信你实际上会在它后面有一些真实的元素。

#box {
  width: 500px;
  border: 1px solid #000;
}

ul  {
  list-style: NONE;
  padding: 0;
  margin: 0;
}

<div id="box">
 <ul>
  <li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></li>
  <li>Text</li>
 </ul>
</div>

Answer 2

您可能正在寻找 line-height css 动词：

line-height: 1.6em;

https://jsfiddle.net/L1jch0Lf/3/

请参阅 MDN 上的文档。

Answer 3

line-height:150%;

大多数浏览器的默认行高约为 110% 到 120%

或

line-height: 30px;

或

line-height:1.5;

每行 header 之间的间距

Spacing between header on each line

html

css

styles

header