Comments on: line-height https://css-tricks.com Tips, Tricks, and Techniques on using Cascading Style Sheets. Tue, 31 May 2022 14:20:36 +0000 hourly 1 https://wordpress.org/?v=6.5.5 By: Lucas https://css-tricks.com/almanac/properties/l/line-height/#comment-1610518 Fri, 21 Jul 2017 13:29:24 +0000 http://css-tricks.com/?page_id=14065#comment-1610518 In reply to Alan James.

So… actually, this unitless value do correspond to a percentage (according to MDN):
font-size: 10px;
line-height: 1.2; /* 12px /
line-height: 1.2em; / 12px /
line-height: 120%; / 12px */
It’s all the same.
So, in the end, you were right, guy.

]]> By: Albert Wiersch https://css-tricks.com/almanac/properties/l/line-height/#comment-1604411 Mon, 03 Oct 2016 22:22:52 +0000 http://css-tricks.com/?page_id=14065#comment-1604411 In reply to Jul.

I can only find the value “none” mentioned in a spec that’s almost 15 years old:
https://www.w3.org/TR/2002/WD-css3-linebox-20020515/#line-height

]]> By: swathi https://css-tricks.com/almanac/properties/l/line-height/#comment-1601424 Sun, 08 May 2016 14:11:18 +0000 http://css-tricks.com/?page_id=14065#comment-1601424 In reply to Kelly Johnson.

Hi Kelly,

I would like to know the good site to learn js frameworks and other web technologies which are currently popular and running the business. Could you please help me out as I wish to become a successful web developer. So kindly let me know the best way to start with.

Waiting for your reply.
Thank you

]]> By: Nil https://css-tricks.com/almanac/properties/l/line-height/#comment-1594869 Sat, 23 May 2015 14:01:51 +0000 http://css-tricks.com/?page_id=14065#comment-1594869 In reply to PRINCE KUMAR YADAV.

well u can use span tag for container bt as per my knowledege we can not set width and height of inline container bcz inline Element only take space that is bounded by its tags. that why there is div (block level) element for container.

]]> By: PRINCE KUMAR YADAV https://css-tricks.com/almanac/properties/l/line-height/#comment-1593187 Fri, 13 Mar 2015 17:47:16 +0000 http://css-tricks.com/?page_id=14065#comment-1593187 I don’t know
How to create a container using inline CSS and how to define width and height of any container in inline CSS

]]> By: Kelly Johnson https://css-tricks.com/almanac/properties/l/line-height/#comment-1592150 Mon, 26 Jan 2015 16:24:59 +0000 http://css-tricks.com/?page_id=14065#comment-1592150 Eric Meyer explained it in his Smashing CSS book, 2011. Some interesting stuff at: http://meyerweb.com/eric/css/tests/

]]> By: Ignatius https://css-tricks.com/almanac/properties/l/line-height/#comment-1587658 Sun, 21 Dec 2014 21:12:21 +0000 http://css-tricks.com/?page_id=14065#comment-1587658 In reply to Alan James.

`CSS offers one other measurement method specific to line height, which is simply
a number. You write it like this:

line-height: 1.5;

There’s no unit (like em or px) after this value. The browser multiplies this number by the font size to determine the line height. So if the text is 1em and the line-height value is 1.5, then the calculated line height is 1.5em. In most cases, the effect is no different from specifying a value of 1.5em or 150%. But sometimes this multiplication factor comes in handy, especially since nested tags inherit the line-height value of their parents.

For example, say you set the line-height property of the tag to 150%. All tags inside the page would inherit that value. However, it’s not the percentage that’s inherited; it’s the calculated line height. So, say the font size for the page is set to 10 pixels; 150 percent of 10 is 15 pixels. Every tag would inherit a line height of 15 pixels, not 150 percent. So if you happened to have a paragraph with large, 36 pixel text, then its line height—15 pixels—would be much smaller than the text, making the lines squish together in a hard-to-read mess.

In this example, instead of using a line-height of 150% applied to the tag, you could have all tags share the same basic proportional line height by setting the line-height to 1.5. Every tag, instead of inheriting a precise pixel value for line height from the body style, simply multiplies its font size by 1.5. So in the above example of a paragraph with 36-pixel text, the line height would be 1.5 x 36 or 54 pixels.

]]> By: John https://css-tricks.com/almanac/properties/l/line-height/#comment-1585372 Thu, 18 Sep 2014 19:40:40 +0000 http://css-tricks.com/?page_id=14065#comment-1585372 In reply to Jul.

I did find it in the W3C working draft, mentioned as a special property.

]]> By: John https://css-tricks.com/almanac/properties/l/line-height/#comment-1585371 Thu, 18 Sep 2014 19:36:58 +0000 http://css-tricks.com/?page_id=14065#comment-1585371 In reply to Jul.

Neither MDN nor W3C mention none as a valid value for line-height

]]> By: Jul https://css-tricks.com/almanac/properties/l/line-height/#comment-1584817 Fri, 29 Aug 2014 09:52:22 +0000 http://css-tricks.com/?page_id=14065#comment-1584817 line-height: none reports as invalid value in chrome

]]> By: Andrew Fatuk https://css-tricks.com/almanac/properties/l/line-height/#comment-1583486 Mon, 07 Jul 2014 10:15:31 +0000 http://css-tricks.com/?page_id=14065#comment-1583486 In reply to Alan James.

Here is the answer https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

]]> By: Alan James https://css-tricks.com/almanac/properties/l/line-height/#comment-1580879 Wed, 07 May 2014 23:14:33 +0000 http://css-tricks.com/?page_id=14065#comment-1580879 I’ve never understood what unitless line height actually represents. I’ve always thought of it as a percent in decimal form, but I know it’s not.

1.5 is not the same as 150%.

What is line height? Percent, pixel value?

What is the formula for taking a line of a given height and finding it’s new height based on a unitless line height?

]]>