Html 高度与行高样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7616618/
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
height vs line-height styling
提问by EverTheLearner
What is the difference between using these two when dealing with text that will never be more than a single line? They both can produce similar results on the screen from what I can see in regards to the elements on top or on the bottom of the element. Why use line-height at all if so? Height would make more sense to use.
在处理永远不会超过一行的文本时，使用这两者有什么区别？根据我在元素顶部或底部的元素所看到的内容，它们都可以在屏幕上产生类似的结果。如果是这样，为什么要使用 line-height 呢？使用高度会更有意义。
Edit: An example of this a stylized button created from a div with text inside. This will never be multiline. So would line-height be needed for compatibility reasons? or anything I don't know about?
编辑：这个例子是一个从 div 创建的风格化按钮，里面有文本。这永远不会是多行的。那么出于兼容性原因需要行高吗？或者我不知道的任何事情？
Thanks!
谢谢！
采纳答案by Dennis Traub
heightis the vertical measurement of the container.
height是容器的垂直尺寸。
line-heightis the distance from the top of the first line of text to the top
of the second.
line-height是从第一行文本的顶部到第二行顶部的距离。
If used with only one line of text I'd expect them to produce similar results in most cases.
如果仅与一行文本一起使用，我希望它们在大多数情况下产生类似的结果。
I use heightwhen I want to explicitly set the container size and line-heightfor typographic layout, where it might be relevant if the user resizes the text.
height当我想显式设置容器大小和line-height排版布局时，我使用它，如果用户调整文本大小，它可能是相关的。
回答by DwB
If you wrap the text in a div, give the div a height, and the text grows to be 2 lines (perhaps because it is being viewed on a small screen like a phone) then the text will overlap with the elements below it. On the other hand, if you give the div a line-height and the text grows to 2 lines, the div will expand (assuming you don't also give the div a height).
如果你将文本包裹在一个 div 中，给 div 一个高度，文本增长到 2 行（可能是因为它是在像手机这样的小屏幕上查看的），那么文本将与它下面的元素重叠。另一方面，如果你给 div 一个 line-height 并且文本增长到 2 行，div 将扩展（假设你也没有给 div 一个高度）。
Here is a fiddlethat demonstrates this.
这是一个证明这一点的小提琴。
回答by Stephan van Hoof
Assuming the text is smaller than the container:
假设文本小于容器：
Setting the line-height on the container specifies the minimum height of line-boxes inside it. For 1 line of text, this results in the text vertically centered inside the container.
在容器上设置 line-height 指定其中 line-boxes 的最小高度。对于 1 行文本，这会导致文本在容器内垂直居中。
If you set height on the container then the container will grow vertically, but the text inside it will start on the first (top) line inside it.
如果您在容器上设置高度，则容器将垂直增长，但其中的文本将从其内部的第一行（顶部）开始。
回答by Alexis Gamarra
height= line-height+ padding-top + padding-bottom
高度=行高+ padding-top + padding-bottom
回答by steveax
For practical purposes in the case you cite (never wrapping to more than one line) line-height will vertically center the text. Be careful about that assumption though as the user ultimately controls the font-size.
出于实际目的，在您引用的情况下（永远不要换行超过一行） line-height 将使文本垂直居中。尽管用户最终控制字体大小，但请注意该假设。
