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

故事扮演 提交于 2019-12-01 14:33:59

问题


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?

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


回答1:


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.

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>


来源:https://stackoverflow.com/questions/8001891/how-to-control-line-height-in-p-styled-as-inline

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!