Height Vs Line-Height Styling

height vs line-height styling

height is the vertical measurement of the container.

line-height is the distance from the top of the first line of text to the top
of the second.

If used with only one line of text I'd expect them to produce similar results in most cases.

I use height when I want to explicitly set the container size and line-height for typographic layout, where it might be relevant if the user resizes the text.

what is line-height in css?

The correct answer is the second (partially!!): line-height property is the height of each text line, but if the content of line overflow it, this will be no hidden because, by default, the html elements does not hide the content that overflow its container.

If you add overflow: hidden you will have evidence of this.

.sampleText {  font-size: 24px;  line-height: 12px;  overflow: hidden;}

<p class="sampleText">This is a Sample Text!!</p>

CSS: how to style on character height versus line height

No (not with a background color anyway). Background colors apply to the entire element (e.g., span element), which is essentially a box as determined by the CSS box model. The official recommendation from the W3C specifies that a background color will fill the content, padding, and border areas of the box model. The CSS3 background (candidate recommendation) offers a bit more power for you to control where background colors apply, but not much.

If you really want the effect you've just demonstrated in your question, I think a JavaScript function to convert "short" characters (e.g., "w") to "▄" and "tall" characters (e.g., "h") to "█" would work nicely. Here's a demo on jsfiddle.

font-size vs line-height vs actual height

First, I recommend reading my answer in Inline elements and line-height. To summarize, there are various heights related to inline boxes:

• Height of the inline box, given by line-height
• Height of the line box, which in simple cases is also given by line-height, but not here.
• Height of the content area of the inline box, which is implementation dependent. This is the area painted by the red background.

The other height in your case is the height of the parent div. This is determined by §10.6.3. In this case, since the box establishes an inline formatting context with one line,

The element's height is the distance from its top content edge to [...] the bottom edge of the last line box

So the height of the parent block is given by the height of the line box.

What happens here is that the height of the line box is not the line-height of your inline box. And that's because the line-height of the parent block is also taken into account:

On a block container element whose content is composed of inline-level elements, 'line-height' specifies the minimal height of line boxes within the element.

The minimum height consists of a minimum height
above the baseline and a minimum depth below it, exactly as if each
line box starts with a zero-width inline box with the element's font
and line height properties.

We call that imaginary box a "strut."

If you set parent's line-height to 0, and child's vertical-align to e.g top, then the height of the parent will exactly be the line-height of the child.

.outer {  margin-top: 50px;  background-color: green;  width: 150px;  font-family: "Times New Roman";  line-height: 0;}.letter-span-1 {  background-color: red;  line-height: 40px;  font-size: 40px;  vertical-align: top;}.letter-span-2 {  background-color: red;  line-height: 15px;  font-size: 40px;  vertical-align: top;}.letter-span-3 {  background-color: red;  line-height: 65px;  font-size: 40px;  vertical-align: top;}

<span class="letter-span-1">XxÀg</span><div class="outer">  <span class="letter-span-1">XxÀg</span></div>The parent block is 40px tall.<div class="outer">  <span class="letter-span-2">XxAg</span></div>The parent block is 15px tall.<div class="outer">  <span class="letter-span-3">XxÀg</span></div>The parent block is 65px tall.

Why does css input text field need height to be specified to render correctly

Your Codepen example defaults to Arial font. If you look in Dev tools (Chrome) you'll see the textbox as inner dimensions of 195x18, with the top and bottom padding of 10px, that's your 38 pixels in height explained.

Now set the .my_input class to use font-family: Tahoma;, now the inner dimensions are 191x19.

Why? Your browser is computing a reasonable value depending on the font size set or inherited on the element.

Excellent deep dive here, https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align.

Here's a key takeaway:

The Arial font describes an em-square of 2048 units, an ascender of 1854, a descender of 434 and a line gap of 67. It means that font-size: 100px gives a content-area of 112px (1117 units) and a line-height: normal of 115px (1150 units or 1.15). All these metrics are font-specific, and set by the font designer.

Note the 1.15 value. If we calculate (font size) 16px x 1.15 the result is 18.4. On Internet Explorer the height of the TextBox element is 18.4px (Chrome displays only 18px, an example of browsers treating this differently).

It's not the font size that's being changed, just the line height of the element.

In summary line-height depends on font-family, font-size and your browser. For this reason height is the more appropriate property to guarantee the result you expect in this case.

CSS line-height on inline element

The line height on the block container, (the <p> element in this case) gives the minimum line height for the lines it contains. So if you want the smaller text to be closer together, you need to avoid setting a large line-height for that. Instead, use the line-heights of the inline elements:

p {  font-size: 18px;  line-height: 0;}
span.primary {  line-height: 2;}
span.secondary {  font-size: 12px;  line-height: 1;}

---<p><span class="primary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.</span>  <span class="secondary">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.        </span></p>

---

Related Topics