CSS 如何在样式为内联的 <p> 中控制行高
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/8001891/
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
How to control line height in <p> styled as inline
提问by w1l
Hopefully this is pretty straight forward, just can't work it out.
希望这很简单,只是无法解决。
I need to style a paragraph as 'inline' but i also need to make the line spacing of the para very tight ... using css i seem to be able to make the line-height larger by styling 'line-height' - however i can't make it smaller than the default ... whereas if i take the 'inline' styling off it works fine. Any ideas?
我需要将段落样式设置为“内联”,但我还需要使段落的行距非常紧凑……使用 css 我似乎能够通过设置“行高”样式来使行高变大 - 但是我不能让它比默认值更小……而如果我去掉“内联”样式,它就可以正常工作。有任何想法吗?
here's an example:
这是一个例子:
<div style="width:200px;">
<p style="display:inline; line-height:0px;" >eqrgewr gergerg wergerg ergqerg ergqerg ergqerg eqrgqerg erg eqrgewr gergerg wergerg ergqerg ergqerg ergqerg eqrgqerg ergeqrgewr gergerg wergerg ergqerg ergqerg ergqerg eqrgqerg ergeqrgewr gergerg wergerg ergqerg ergqerg ergqerg eqrgqerg ergeqrgewr gergerg wergerg ergqerg ergqerg ergqerg eqrgqerg ergeqrgewr gergerg wergerg ergqerg ergqerg ergqerg eqrgqerg ergeqrgewr gergerg </p>
<p style="line-height:0px;" >eqrgewr gergerg wergerg ergqerg ergqerg ergqerg eqrgqerg erg eqrgewr gergerg wergerg ergqerg ergqerg ergqerg eqrgqerg ergeqrgewr gergerg wergerg ergqerg ergqerg ergqerg eqrgqerg ergeqrgewr gergerg wergerg ergqerg ergqerg ergqerg eqrgqerg ergeqrgewr gergerg wergerg ergqerg ergqerg ergqerg eqrgqerg ergeqrgewr gergerg wergerg ergqerg ergqerg ergqerg eqrgqerg ergeqrgewr gergerg wergerg ergqerg ergqerg ergqerg eqrgqerg ergeqrgewr gergerg wergerg ergqerg ergqerg ergqerg </p></div>
many thanks
非常感谢
回答by sled
On inline elements, the line-height CSS property specifies the height that is used in the calculation of the line box height. On block level elements, line-height specifies the minimal height of line boxes within the element.
在行内元素上,line-height CSS 属性指定用于计算行框高度的高度。在块级元素上, line-height 指定元素内行框的最小高度。
https://developer.mozilla.org/en/CSS/line-height
https://developer.mozilla.org/en/CSS/line-height
what you can do:
你可以做什么:
- set
line-height: 0px;
on the wrapping<div>
element - set
display: inline-block;
on the inner<p>
- float the inner
<p>
line-height: 0px;
在包装<div>
元素上设置- 设置
display: inline-block;
在内部<p>
- 浮动内部
<p>