Is Line-Height: 1.4 The Same as Line-Height: 140%

What's the difference between decimal and percentage line-height

Percentage line heights are computed first based on the font size for the given element. This computed value is then inherited pre-baked by descendants. The computed value of a decimal line height on the other hand is that decimal value (this is what is meant by "specified value"); what you end up seeing is the used value, which is "computed" on each descendant based on its own font size after it has been inherited. In CSS, it is computed values that are inherited, not used values.

Let's start with the container:

.container {
    font-size:1rem;
    line-height:140%;
}

The container has a computed font size of 1rem, and a computed line height of 1.4rem.

This computed line height is then inherited by column A. Column A has a font size of 1.2rem, and a line height of 1.4rem.
The same line height is then inherited by the child of column A, so its font size computes to 1.44rem (based on column A's) and its line height remains as 1.4rem.
You override the line height of column B such that it gets its own line-height:140% declaration. This percentage is calculated based on the font size of column B. That makes 140% of 1.2rem, not of 1rem, resulting in a line height of 1.68rem.
This value is then inherited by the child of column B. Its font size computes to 1.44rem and its line height 1.68rem.
You override the line height of column C with a line-height:1.40 declaration. While the font size and line height of column C are calculated in the same way as those of column B, what is inherited by its child is not 1.4 × 1.2rem = 1.68rem; it is 1.4 (a ratio, or a raw percentage if you will, but not a length).
So the child of column C has a computed line height of 1.4, as inherited from column C. This value is then used in calculating the child's line height based on its own font size. Therefore its used line height is 1.4 × 1.44rem = 2.016rem.

Eric Meyer has a great article on decimal vs percentage line heights. Mine just happens to be a slightly more convoluted explanation, but the principles are the same.

What's the difference between line-height:1.5 and line-height:150% in css?

Short version: line-height: 150% is static, line-height: 1.5 is dynamic. The effect is more evident on inheriting elements. An example:

HTML

<div style="font-size: 12px">
    <span style="font-size: 24px">test</span>
</div>

This CSS

div { line-height: 150%; } /* Computed line-height: 18px (150% * 12px) */
span { }                   /* Computed line-height: 18px (inherited directly) */

As opposed to this:

div { line-height: 1.5 }   /* Computed line-height: 18px (1.5 * 12px) */
span { }                   /* Computed line-height: 36px (1.5 * 24px) */

You may read more at the CSS2 specs page

css line-height : number to px

Unitless line-height refers to the font-size of the element.

If your element has set font-size: 14px, do the simple math:

1.54 * 14px = 21.56px

You can get more information here:

https://developer.mozilla.org/en/docs/Web/CSS/line-height

Some questions about line-height

In my experience, a common default line-height seems to be close to 1.2 (that would be ~19px leading for a 16px font (16*1.2)). In some browsers versions it's about 1.1 - but I can't remember ever seeing it outside that scope.

The line-height property is inherited from parent to child - so specifying a line-height on <body> will affect all elements on the page, except the ones that have their own line-height property set, and their descendants. (See example below)

Line height affects the height occupied by each character - so yes it also has an effect on single-line-of-text elements.

Line-height comes in three basic flavours:

'relative'/'unitless' (e.g. 1.2)
'fixed' (e.g. 14px)
'fixed-relative' (e.g. 1.2em)

Relative (unitless) values will apply proportionally equivalent line-height to all elements depending on their font-size.
Meanwhile, fixed values (px) don't change with the font-size.

For explanation of the 'fixed-relative' variant (the 'em'-values) refer to Eric Meyer's blog post "Unitless Line-Heights".

Each flavour has it's place in the world. :-)

Here's a short example of all three:

body {
  font-size: 12px;
  line-height: 1.5;
}
small {
  font-size: 10px;
}
div {
  line-height: 21px;
}
p {
  line-height: 2em;
}

...

<body>
  one
  <small>two</small>
  <div>
    three
    <small>four</small>
  </div>
  <p>
    five
    <small>six</small>
  </p>
</body>

Each word in the example above would have the following line-heights (translated into px)

'one' == 18px (1.5 times the 12px font-size of body)
'two' == 15px (1.5 times the 10px font-size of small)
'three' == 21px (fixed px value)
'four' == 21px (inherits a fixed px value from div)
'five' == 24px (2 times the 12px font-size of p (inherited from body))
'six' == 24px (inherits a (fixed) pre-calculated value from p)

Calculate line-height with font in rem-value

Well, in my opinion, all these (<number> | <length> em | <percentage>) relative measures might be appropriate for line-height property.

<number> The used value is this unitless <number> multiplied by the
element's font size. The computed value is the same as the specified
<number>. In most cases this is the preferred way to set line-height
with no unexpected results in case of inheritance.

<length> The
specified <length> is used in the calculation of the line box height.

<percentage> Relative to the
font size of the element itself. The computed value is this percentage
multiplied by the element's computed font size. Percentage and em
values may have unexpected results.

MDN reference

The difference between `number` and `percentage` or `em`:

According to MDN doc, this unitless number multiplied by element's own font-size (Also for each children of the current element).

While using percentage or em for a parent element, causes the children to obey from their parent's computed line-height.

Check this demo to see the issue in action.

Putting all together

In this case, all these values have the same effect:

p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-size: 1.4rem;

  line-height: 1.3;   /*  = 1.3 * computed font-size */
  line-height: 130%;  /*  = 1.3 * computed font-size */
  line-height: 1.3em; /*  = 1.3 * computed font-size */
}

But to if you want to calculate the line-height value in rem unit, you can use the following:

html {  font-size: 62.5%; /* ~10px = 16px(default) * 0.625 */}
p {  font-family: Arial, Helvetica, sans-serif;  font-size: 14px;  font-size: 1.4rem;  line-height: 1.3; /* as fallback */    /* value = (10px * 1.4 * 1.3) / 10px = 1.82rem               |      |     |      <html>   |      |     --> line-height multiplier (same as <number>)   font-size <--      |       in px          --> Current element's font-size ratio  */  line-height: 1.82rem;}
span { background-color: gold; } /* for demo */

<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.  Consectetur quis omnis repellat voluptates necessitatibus repellendus  sapiente nesciunt vero dolorem voluptate mollitia ex a quo consequuntur  quia quasi aperiam quibusdam maiores.</span></p>

How can I change the line height in the code cell of a jupyter notebook

In CSS, the distance between lines is defined as line-height. I'm not entirely sure how this will apply to you as i have never used Jupyter, but if it works from a CSS stylesheet you could use:

*{
    line-height:10px; // Tweak till happy
}

Is Line-Height: 1.4 The Same as Line-Height: 140%

What's the difference between decimal and percentage line-height

What's the difference between line-height:1.5 and line-height:150% in css?

css line-height : number to px

Some questions about line-height

Calculate line-height with font in rem-value

The difference between `number` and `percentage` or `em`:

Putting all together

How can I change the line height in the code cell of a jupyter notebook

Related Topics

Leave a reply

What's the difference between decimal and percentage line-height

What's the difference between line-height:1.5 and line-height:150% in css?

css line-height : number to px

Some questions about line-height

Calculate line-height with font in rem-value

The difference between number and percentage or em:

Putting all together

How can I change the line height in the code cell of a jupyter notebook

Related Topics

Leave a reply

The difference between `number` and `percentage` or `em`: