Question

我想在所有行之间保持相同的行高，这是可能的（考虑到我将它指定为0.99em）。 P标签和UL标签之间的空间也必须是0.99em。 P tag和P tag之间的空间也必须是0.99em。这可能吗？

请在此处查看Bootply ... http://www.bootply.com/AIcBXdqs6t

代码：

HTML

<p><span>7.1</span> this is itthis is itthis is itthis is itthis is itthis is itthis is itthis is itthis is itthis is itthis is itthis is itthis is itthis is itthis is itthis is itthis is it.</p>
<p><span>7.2</span> here we gohere we gohere we gohere we gohere we gohere we gohere we gohere we gohere we gohere we gohere we gohere we gohere we gohere we go.</p>
<p><span>7.3</span> now toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow toonow too</p>
<ul>
<li>(a) why why why whywhy whywhy whywhy whywhy whywhy whywhy whywhy why</li>
<li>(b) if if ifif if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if if  </li>
<li>(c) please pleasepleasepleasepleasepleasepleasepleasepleasepleasepleasepleasepleasepleasepleasepleaseplease</li>
</ul>
<p><span>8.1</span> Take this.Take this.Take this.Take this.Take this.Take this.Take this.Take this.Take this.Take this.Take this.Take this.Take this.Take this.Take this.Take this.Take this.Take this.Take this.Take this.Take this.</p>
<p><span>8.2</span> Take this.Take this.this.Take this.Take this.Take this.this.Take this.Take this.Take this.Take this.Take this.</p>

CSS：

/* CSS used here will be applied after bootstrap.css */

p {
    padding-left: 3em;
    position: relative;
    margin-left:5em;
    margin-right:5em;
    line-height:0.99em;
}

p > span {
    display: inline-block;
    left: 0;
    position: absolute;
    top: 0; 
    width: 3em
}

ul {
    list-style: none;
    text-indent:-0.5em;
    margin-left:7em;
    margin-right:4em;
    line-height:0.99em;
}

Answer 1

您是否尝试过使用 px 值设置line-height属性？ em 是一个相对单位，如果你不知道什么事情可能会很棘手。这是一个很好的解释Why em instead of px?

我已在此处为您的代码添加了px行高设置http://www.bootply.com/cVuRikEPbO#

Answer 2

从评论中发布答案。

行高属性用于设置标记中行的高度，以便两行段落具有每行的一些设置高度值。把它想象成标签内的高度。

标签之间的空格不是line-height属性。在你的情况下，标签之间有空格，因为margin-bottom：10px应用于它。

Answer 3

设置一个具有长度值的行高，并不能保证该行成为该高度。

如果字体不完全适合，则行高的计算值将不是您指定的值。（什么'恰当'意味着也可能不是那么简单。）

我的1：

<p style="line-height:12pt;font-family:Verdana;font-size:16pt;">
line-height:12pt / font-size:16pt<br><br>
Testing Testing Testing<br/>
Testing Testing <span style="font-family:'Segoe Script';">Testing Segoe Script</span><br/>
Testing Testing Testing<br/>
</p>
<br>
<p style="line-height:12pt;font-family:Verdana;font-size:12pt;">
line-height:12pt / font-size:12pt<br><br>
Testing Testing Testing<br/>
Testing Testing <span style="font-size:20pt;">Testing font-size:20pt</span><br/>
Testing Testing Testing<br/>
</p>

相同的行高

3 个答案: