is line-height:1 equivalent to 100%?
The real reason is that the way they work is different and it can be understood by having a look at the W3C Specs for line-height and inheritance. The below is what the spec for line-height says about the unitless value (<number>
) and the percentage value.
<number> - The used value of the property is this number multiplied by the element's font size. Negative values are illegal. The computed value is the same as the specified value.
<percentage> - The computed value of the property is this percentage multiplied by the element's computed font size. Negative values are illegal
As BoltClock points out in his comment (correctly, as usual), inheritance always works the same way and it is always the computed value that gets inherited. The confusion with wordings was because I was referring to an older version of the spec whereas the new one is very clear and is using the right words.
When unitless value (number) is specified, the specified value for line-height
is the number which is also the computed value. So, h1
(child) inherits the number which is 1 but it still needs to resolve this number into an actual line-height
that can be used. So, the used value is calculated based on specs by multiplying the inherited factor with the h1
element's font-size (which is 2em = 32px) and sets line-height
as 32px
.
For the percentage, the computed value for line-height
at body
is 100% of body's font-size (which is 16px
) and so is equal to 16px
. Now since this 16px
is the computed value, the h1
child inherits this value and uses it as-is because there is no need for further resolutions.
This is the reason why there is a difference between the two snippets as in one the line height for the h1
is 16px and in another it is 32px.
If we set the line-height: 100%
directly at h1
then we can see that the outputs match because now the h1
calculates its own line-height as 100% of 2em (or 32px) which is same as 1 * its font-size.
h1 {
line-height: 100%;
}
<h1>
Hello <br> world
</h1>
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>
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 does not go all the way up or down
As you've observed, if you give an element containing text:
- a
font-size
of1em
- a
line-height
of2em
the text will be rendered in the vertical middle of the line-height
.
The text will still be 1em
tall, but it will now have 0.5em
of space above it and below it.
To (seemingly, though not actually) counteract this vertical-middle-alignment, one approach would be to apply a
transform: translateY(-0.5em)
to the text-containing element.
Working Example:
body {
display: flex;
}
.wrap-1,
.wrap-2,
.wrap-3 {
display: flex;
margin-right: 12px;
}
.first {
background: red;
width: 1rem;
}
.wrap-1 .second {
font-size: 1em;
line-height: 1em;
background-color: rgb(255, 255, 0);
}
.wrap-2 .second {
font-size: 1em;
line-height: 2em;
background-color: rgb(255, 255, 0);
}
.wrap-3 .second {
font-size: 1em;
line-height: 2em;
background-color: rgb(255, 255, 0);
}
.wrap-3 .second p {
background-color: rgba(0, 0, 0, 0.2);
transform: translateY(-0.5em);
}
p {
margin: 0;
padding: 0;
background-color: rgba(0, 0, 0, 0.2);
}
<div class="wrap-1">
<div class="first"></div>
<div class="second"><p>A text that<br>spans on multiple rows</p></div>
</div>
<div class="wrap-2">
<div class="first"></div>
<div class="second"><p>A text that<br>spans on multiple rows</p></div>
</div>
<div class="wrap-3">
<div class="first"></div>
<div class="second"><p>A text that<br>spans on multiple rows</p></div>
</div>
Related Topics
CSS Width and Max-Width Combined
Center a Row Using Bootstrap 3
Setting Up Auto Compile for Stylus
Div to Take Up Entire Remaining Width
Insert a Background Image in CSS (Twitter Bootstrap)
How to Target Galaxy Nexus and Nexus 7 with Media Queries
How to Avoid Webkit Contenteditable Copy-Paste Resulting in Unwanted CSS
How to Position a CSS Triangle Using ::After
Remove 1Px Transparent Space from CSS Box-Shadow in Ie11
Positioning Svg Elements Using CSS
Bootstrap Scrollable Tab Panel Content
Relative Parent, Absolute Positioning Vertically by Percentage