Issue
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 ?
Solution
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>Answered By - Kevin Jimenez
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.