Some of the understanding and techniques of line-height line Heights

As we all know, how to set the text vertical center, that is: set line-height and the height of the outer box is consistent;

In fact, there is a place, is superfluous, that is, height, set not set are centered;

So, is the height of the line high?

First small question: when the DIV does not set the height of the case, open its height is the text inside it?

The answer is no, you can try it when you set the line height to line-height:0; , the height of the div is still 0; it turns out that the height of the open div is related to the High Line of the text;

First understand, the inline box model, which has a line boxes, it is not to see the touch of things, it's work is wrapped in each row of text, its properties are only high height, first if the div is not set height, then its height is inside a line Boxes the height of an accumulation; (vertical many lines of text)

However, when there is only one row, line boxes will query which one of the rows is larger, and thus take its height, such as:<div> <span style= "line-height:20px;" > Take his men line-height<span style= "line-height:40px;" > Highest </span> value </span></div>, at this point line boxes row height is 40px, thus the height of the div is 40px; (horizontal line of text)

Next, add a magical magic, using the line-height and vertical attributes to achieve the vertical horizontal center of the multi-line picture

The parent wrapping layer is set, line-height and height are equal and text-align:center, the picture inside is set vertical-align:middle;

Some of the understanding and techniques of line-height line Heights