在 Html <p> 中设置行高，使 <p> 具有不同字体大小时使 html 看起来像办公字词
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6584656/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set line height in Html <p> to make the html looks like a office word when <p> has different font sizes
提问by sky609
How to set the line height in ONE html tag <p>, when this <p>have two different font sizes?
<p>当一个 html 标签<p>有两种不同的字体大小时，如何设置行高？
If I set the <p style="line-height:120%">.... </p>, then the whole <p>will only have one line height.
如果我设置<p style="line-height:120%">.... </p>，那么整个<p>将只有一个行高。
But I hope it will behave like the Microsoft Office Word/(and Google Doc). i.e.: different contents with different font sizes will have different line height.
但我希望它的行为像 Microsoft Office Word/（和 Google Doc）。即：不同字体大小的不同内容将具有不同的行高。
Is it possible for <p>to achieve that effect? Or do I have to do this line by line, like Google Doc? Is there any easier way?
有没有可能<p>达到这种效果？还是我必须像 Google Doc 那样逐行执行此操作？有没有更简单的方法？
回答by Pavel Vladov
Actually, you can achieve this pretty easy. Simply specify the line height as a number:
事实上，你可以很容易地做到这一点。只需将行高指定为数字：
<p style="line-height:1.5">
<span style="font-size:12pt">The quick brown fox jumps over the lazy dog.</span><br />
<span style="font-size:24pt">The quick brown fox jumps over the lazy dog.</span>
</p>
The difference between number and percentage in the context of the line-height CSS property is that the number value is inherited by the descendant elements, but the percentage value is first computed for the current element using its font size and then this computed value is inherited by the descendant elements.
在line-height CSS 属性的上下文中，number 和百分比的区别在于，数字值是由后代元素继承的，但首先使用当前元素的字体大小计算百分比值，然后再继承这个计算值通过后代元素。
For more information about the line-height property, which indeed is far more complex than it looks like at first glance, I recommend you take a look at this online presentation.
有关 line-height 属性的更多信息，它确实比乍一看要复杂得多，我建议您查看此在线演示文稿。
回答by Litek
回答by thinklarge
I found that in my code when I used a ration or percentage for line-height line-height;1.5;
我发现在我的代码中，当我使用比例或百分比作为行高时 line-height;1.5;
My page would scale in such a way that lower case font and upper case font would take up different page heights (I.E. All caps took more room than all lower). Normally I think this looks better, but I had to go to a fixed height line-height:24px;so that I could predict exactly how many pixels each page would take with a given number of lines.
我的页面将以小写字体和大写字体占用不同页面高度的方式进行缩放（IE 所有大写比所有小写占用更多空间）。通常我认为这看起来更好，但我必须去一个固定的高度，line-height:24px;以便我可以准确地预测每个页面在给定的行数下需要多少像素。
