Set line height in Html p to make the html looks like a office word when p has different font sizes

Question

How to set the line height in ONE html tag  lt p gt   when this  lt p gt  have two different font sizes   If I set the  lt p style  line-height 120   gt        lt  p gt   then the whole  lt p gt  will only have one line height   But I hope it will behave like the Microsoft Office Word  and Google Doc   i e   different contents with different font sizes will have different line height   Is it possible for  lt p gt  to achieve that effect  Or do I have to do this line by line  like Google Doc  Is there any easier way

User · Answer

You can set the line-height in pixels instead of percentage  Is that what you mean

User · Answer

I found that in my code when I used a ration or percentage for line-height line-height 1 5   My page would scale in such a way that lower case font and upper case font would take up different page heights  I E  All caps took more room than all lower    Normally I think this looks better  but I had to go to a fixed height line-height 24px  so that I could predict exactly how many pixels each page would take with a given number of lines

User · Answer

Actually  you can achieve this pretty easy  Simply specify the line height as a number    lt p style  line-height 1 5  gt       lt span style  font-size 12pt  gt The quick brown fox jumps over the lazy dog  lt  span gt  lt br   gt       lt span style  font-size 24pt  gt The quick brown fox jumps over the lazy dog  lt  span gt   lt  p gt    The difference between number and percentage in the context of the line-height CSS property is that the number value is inherited by the descendant elements  but the percentage value is first computed for the current element using its font size and then this computed value is inherited by the descendant elements   For more information about the line-height property  which indeed is far more complex than it looks like at first glance  I recommend you take a look at this online presentation

[html] Set line height in Html <p> to make the html looks like a office word when <p> has different font sizes

Examples related to html

Examples related to fonts

Examples related to css