CODEWITHSUNDEEP
htmlcss
Mahi
Mahi

Reputation: 1727

what is line-height in css?

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 ?

Upvotes: 6

Views: 3061

Answers (6)

Nesha Zoric
Nesha Zoric

Reputation: 6630

The CSS line-height property defines the amount of space used for lines, most commonly in the text. It is often confused with line spacing (leading) used in Photoshop and similar software.

Leading is a term that describes the distance between the baselines in the text. In the case of defining leading, space is always added below the text. But, when working with line-height property, space is always added equally above and below the text.

Line height can be defined with px, em, percentages and unitless values. One of the examples of the usage of line-height is here:

div {
  Font-family: ‘Lato’, sans-serif;
  Font-size: 14px;
  Line-height: 2 // equals to 28px
}

Here we see if you set the line-height without a unit, the result is the line-height value multiplied by the element’s font-size.

Upvotes: 0

Kevin Jimenez
Kevin Jimenez

Reputation: 436

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>

Upvotes: 2

Rajesh
Rajesh

Reputation: 24925

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>

Upvotes: 2

er-han
er-han

Reputation: 1921

The 2nd one is true. Line-height means the height of one line.

I sometimes use line-height property to vertically center the text in any kind of element.

As you see in the samples below; in first p, line-height is bigger than font-size and the text is vertically centered in line.

In second p, line-height is smaller than the font-size and the text overflowed the line.

In the last p, line-height is smaller than the font-size and p's overflow property is set to hidden, so the text is overflowed and partly visible.

p#p1 {
  border:1px solid #ccc;
  font-size:12px;
  line-height:36px;
}

p#p2 {
  border:1px solid #ccc;
  font-size:36px;
  line-height:12px;
}

p#p3 {
  border:1px solid #ccc;
  font-size:36px;
  line-height:12px;
  overflow:hidden;
}
<p id="p1">
  Lorem ipsum Lorem ipsum
  </p>

<p id="p2">
  Lorem ipsum Lorem ipsum
  </p>

<p id="p3">
  Lorem ipsum Lorem ipsum
  </p>

Upvotes: 0

Albert Lazaro de Lara
Albert Lazaro de Lara

Reputation: 2710

On block level elements, the line-height property specifies the minimum height of line boxes within the element.

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

Searching in the web I find that the line-height is the height of the line, but it will always render text.

As I find in a Spanish web, the standard value of line-height is 1.0 t0 2.0 (without unity like px, pt...)

Upvotes: 0

L L
L L

Reputation: 1470

The 'line-height' property specifies how 'tall' a line should be. it does not increase/decrease the font size, it only says how much space the text will take up vertically. If it's too low, in a paragraph the words would go over each other. If it's too high, the words would be far apart. More on that here: http://www.w3schools.com/cssref/pr_dim_line-height.asp

Upvotes: 0

Related Questions