Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 910
w1l Avatar asked Nov 03 '11 21:11

w1l


People also ask

Can we set height for inline elements?

Inline element properties:The height and width of an inline element cannot be set in CSS. You cannot set the height and width of block-level elements in CSS. Inline elements flow left to right, meaning inline elements appear on the same line unless the line wraps or there's an explicit line break ( <br/> )

Can inline elements have width and height?

inline The element doesn't start on a new line and only occupy just the width it requires. You can't set the width or height.

What is inline height?

The line-height property defines the amount of space above and below inline elements. That is, elements that are set to display: inline or display: inline-block . This property is most often used to set the leading for lines of text.

What is 150% line-height?

line-height: 150% will take 150% of the element's computed font size to compute the line height, which is equivalent to multiply it by 1.5 .


1 Answers

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>
like image 53
sled Avatar answered Sep 23 '22 20:09

sled