【问题标题】:Spacing between header on each line每行标题之间的间距
【发布时间】:2016-05-15 06:56:01
【问题描述】:

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

JSFiddle Demo

【问题讨论】:

  • 你可以使用行高

标签: html css header styles


【解决方案1】:

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

line-height: 1.6em;

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

请参阅MDN 上的文档。

【讨论】:

    【解决方案2】:

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

    #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>

    【讨论】:

    • 我更像一个段落而不是一个列表
    • @user4756836 您可以在这些列表中添加任何您想要的内容。检查我编辑的示例。
    【解决方案3】:
    line-height:150%;
    

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

    line-height: 30px;
    

    line-height:1.5;
    

    【讨论】:

      猜你喜欢
      • 2014-05-09
      • 2021-05-13
      • 1970-01-01
      • 1970-01-01
      • 2010-12-02
      • 1970-01-01
      • 1970-01-01
      • 2012-07-25
      • 2020-02-23
      相关资源
      最近更新 更多