为什么 CSS 属性“line-height”不能让我在 Chrome 中设置紧凑的行距？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7424867/
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
Why isn't the CSS property 'line-height' letting me make tight line-spaces in Chrome?
提问by Simon Suh
I have a paragraph tag that I defined elsewhere with a line height of 15px, and I have another paragraph tag further down the page where I want to make the line height around 10px. Funny thing is, it won't let me get down to 10px or anything smaller than that, but when I set it to 25px or higher, the line-height property seems to be working.
我有一个段落标签，我在别处定义了 15px 的行高，我还有另一个段落标签，在页面下方，我想让行高在 10px 左右。有趣的是，它不会让我降低到 10px 或任何小于 10px 的值，但是当我将它设置为 25px 或更高时，line-height 属性似乎正在起作用。
I checked the relevant CSS (all hand-coded) via the Chrome browser's web developer tools (Chrome's version of Firefox's Firebug) and couldn't find anything relevant. Is there a common CSS bug that prevents me from shrinking the line-height beyond a certain minimum amount?
我通过 Chrome 浏览器的 Web 开发工具（Chrome 版本的 Firefox 的 Firebug）检查了相关的 CSS（全部手工编码），但找不到任何相关内容。是否有一个常见的 CSS 错误阻止我将行高缩小到某个最小值以上？
采纳答案by Andres Ilich
line-height is relative to font-size, you can't go any lower than that unless you declare negative margin.
行高是相对于字体大小的，除非您声明负边距，否则不能低于此值。
回答by mhenry1384
I've noticed in both Firefox and Chrome that if you set the HTML5 doctype there's a minimum line-height for inline elements. For block elements you can set the line-height to whatever you want, even make the lines overlap.
我在 Firefox 和 Chrome 中都注意到，如果您设置 HTML5 doctype，则内联元素有一个最小行高。对于块元素，您可以将行高设置为您想要的任何值，甚至可以使行重叠。
If you don't set the HTML5 doctype, there's no minimum line-height for either block or inline elements.
如果您不设置 HTML5 文档类型，则块或内联元素都没有最小行高。
回答by Nitish
I ran into the same issue, worked well with:
我遇到了同样的问题，与：
.element { display: block; line-height: 1.2; }
回答by John Washam
After testing this in IE 8-11, Firefox 38.0.1, and Chrome 43, the behavior is the same: inline elements have a minimum line-height that they won't go below. It appears this minimum height comes from the CSS spec:
在 IE 8-11、Firefox 38.0.1 和 Chrome 43 中对此进行测试后，行为是相同的：内联元素具有它们不会低于的最小行高。看来这个最小高度来自CSS 规范：
On a block container element whose content is composed of inline-level elements, 'line-height' specifies the minimal height of line boxes within the element. The minimum height consists of a minimum height above the baseline and a minimum depth below it, exactly as if each line box starts with a zero-width inline box with the element's font and line height properties. We call that imaginary box a "strut."
在内容由行内级元素组成的块容器元素上，'line-height' 指定元素内行框的最小高度。最小高度由基线上方的最小高度和基线下方的最小深度组成，就像每个行框都以具有元素字体和行高属性的零宽度行内框开始一样。我们称这个假想的盒子为“支柱”。
If you want to maintain some benefits of inline elements, you can use display: inline-block. You can also use display: block. Both will allow you to make the line-height whatever you want in all the browsers I tested.
如果你想保持内联元素的一些好处，你可以使用display: inline-block. 您也可以使用display: block. 两者都允许您在我测试的所有浏览器中设置任何您想要的行高。
Two related questions for more reading:
更多阅读的两个相关问题：
why the span's line-height is useless
The browser seems to have a minimum line-height on this block that contains text. Why?
