Menu
So there can be only two possibilities.
1) if line-height is height between two lines then what will be the line-height for one line ??
2) if line height is height of line then if i make line-height to 0 so nothing should be visible right ? but as you can see in example after line-height 0 the content is visible .
<!DOCTYPE html>
<html>
<head>
<style>
p {
line-height: 0;
}
</style>
</head>
<body>
<p>
First Line First Line First Line First Line First Line<br>
Second Line Second Line Second Line<br>
Third Line Third Line <br>
</p>
</body>
</html>so which one is correct ?
729
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>As you can see, line-height refer to the height of line and the rest of text was hidden when we add overflow:hidden. If the overflow: hidden is missing, the text will have the default property of html for all elements: overflow:visible.
If line-height property value is greater than font-size, the text will be aligned middle vertically, as you can see in the next example.
.sampleText {
font-size: 24px;
line-height: 40px;
background-color: sandybrown;
}<p class="sampleText">This is a Sample Text!!</p>As per MDN
On block level elements, the line-height property specifies the minimum height of line boxes within the element.
On non-replaced inline elements, line-height specifies the height that is used to calculate line box height.
What it means is, if you set it to a block element line <div>, it defines its height of line box. What Line-box means is the height of a line a block element will have.
For others(inline) element like <span>, it will define the line height of container it is rendered in (Check last div in below snippet).
div{
border: 1px solid grey;
display: inline-block;
padding: 0px 4px;
}
span{
border: 1px solid red;
width: 50px;
overflow: auto;
display: inline-block;
}
.test1{
line-height: 30px;
}
.test2{
line-height: 50px;
}<div class="test1"><span> Hello </span></div>
<div class="test2"><span> World </span></div>
<div>
<span class="test1"> Test 2</span>
</div>
<div>
<span class="test2"> Test 3</span>
</div>
<div>
<span class="test1"> Test 4</span>
<span class="test2"> Test 5 to test wrap</span>
<span>this it to justify</span>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
