CODEWITHSUNDEEP
css
Dannyboy
Dannyboy

Reputation: 2052

How CSS line-height is measured?

Is line-height in CSS goes from the bottom of the text to the bottom of the next line's text? or is text is vertically centered inside of the line?

Please see the example image:

enter image description here

Upvotes: 10

Views: 7474

Answers (6)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201598

The line-height property specifies the minimum height of line boxes, roughly speaking; the exact effect depends on the context (see the spec).

It is impossible to tell from the image what the real question is.

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157334

As I already commented, the first example is what line-height actually behaves.

According to me, image is wrong, the line-height in the image is counted from baseline to baseline where as the line-height is counted on both the sides vertically, it's calculated by multiplying the number with elements font-size.

As an example, I've created a sample

div {
    outline: 1px solid #f00;
    line-height: 40px;
}

Demo

enter image description here

In the above example, the line-height acts like padding-top and padding-bottom property (It's not really a padding) and that's how it really works.

Upvotes: 3

web-tiki
web-tiki

Reputation: 103790

Form MDN :

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

On non-replaced inline elements, line-height specifies the height that is used in the calculation of the line box height.


As you can see in this DEMO and the folowing image. This means that for text, line-height defines the height of the box surounding the letters vertically centered inside that box so your first example is right.

enter image description here

Image from www.w3.org

Upvotes: 9

Vereos
Vereos

Reputation: 513

To me it seems it's the first example showed in the image. Let's take this code:

CSS

div {
    width:120px;
    height:30px;
    border:1px solid black;
    margin-bottom:5px;
}
#box2 {
    line-height:30px;
}
#box3 {
    line-height:10px;
}
#box4 {
    line-height:60px;
}

HTML

<div id="box1">No line-height</div>
<div id="box2">30px line-height</div>
<div id="box3">10px line-height</div>
<div id="box4">60px line-height</div>

Fiddle here:

http://jsfiddle.net/58CJw/

It really seems that line-height is fontSize + spaceAbove + spaceBelow, where spaceAbove = spaceBelow.

Upvotes: 1

Mohamad
Mohamad

Reputation: 35349

The line is vertically centered. This is why you can use line-height to vertically center one line elements.

Upvotes: 0

Fizor
Fizor

Reputation: 1530

Found this image, so it is your first example which is line-height

enter image description here

Upvotes: 1

Related Questions