Question

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

Answer 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>