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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 02:04:40  来源:igfitidea点击:

How to control line height in <p> styled as inline

cssinlinespacing

提问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>