CSS properties that must be mastered--lineheight

1, definition of row height

Row height refers to the distance between the lines, that is, the distance between the baseline, and only two lines of text will have two baselines, then why is a single line of text also have row height? We look down with this question.

2, inline box model

<p> This is a single-line text that has a <span> content area </span> tag. </p>

Figure A

"Content area" (content area) is a box around the text, we can be seen as the size of the mouse in the selected text region, its size is only related to Font-size, can be seen as the text in Figure one is selected by the mouse area, that is, the selected "single-line text" area.

"inline Box" (inline Boxs) does not make the text appear as blocks, but is arranged in a line. Text wrapped by inline elements, such as the "content area" of a span label package, can be called an "inline box", and without the part of the inline element package, we can be seen as an "anonymous inline box." The "inline box" can be seen as the "content area" area within the span tag in figure one, while the anonymous inline box can be seen as the contents of a dashed red package.

"Line box boxes" (line boxs), each line is a "wireframe box", the box is composed of anonymous and non-anonymous inline boxes. Can be considered as the area of the outermost red solid line in figure one.

"Include box" (containing box), this box is made up of "line box boxes".

3, height mechanism of line height

Row-high impact is ubiquitous, even for single-line text.

The height of single-line text is only affected by line-height, but mainly by content area and line spacing.

Line height of single line text:

Line-height = content area height + line spacing height

So:

Line spacing = line-height-Content area height

The distance between the upper part of the text we see and the top of the "line box" is the half-line spacing.

4, line height units

(1), number

For example:

line-height:2;font-size:20px;

At this point the text occupies a height of 20*2=40px

(2), length

For example:

font-size:20px;line-height:20px;line-height:2em;line-height:3rem;line-height:3pt;

There is a fixed value in px, and the rest needs to be calculated in conjunction with the default size of the browser or the Font-size property of the body.

(3)

<p>    Text    <p> This is P tag </p></p>p{font-size:20px;line-height:150%;} p{font-size:50px;}

Then the line height of "text" is 30px, the inner p label row height is also 30px, and the row height is not recalculated according to the child elements.

This means that when the row height is set to a percentage, the parent element inherits from the row height calculated by font-size to the child element, and the child element does not calculate the row height according to the font-size reload, which is generally not used.

(4), normal

Sets the row height according to the browser default Line-height property.

(5), Inherit

Row High Inheritance ie8+

Inherits the parent element's row height settings, which are typically applied in some input and button tags.

Application of 5,line-height

(1) To eliminate the spacing between the picture and the bottom of the container

Figure II

Cause:

Inline element Default baseline alignment, blank tag contains a blank ghost node, the equivalent of a picture and a text alignment, according to Vertical-align:baseline, so there is a gap in the bottom of the picture.

The Ghost blank node here can be understood as a letter C, because it is the baseline alignment, and the parent element is not set a fixed height, so the parent element height is filled by the content, because C to align with the picture baseline, so it will be on the bottom edge.

When the parent element is set to a fixed height, the simple p contains the picture and the letter C, the default picture is aligned with the text baseline, and the C in Figure three is the phantom blank node.

Might

Elimination method

1, make the picture blocky

2, Photo Vertical-align:bottom

3, let anonymous blank node line-height:0

(2), small icon Large text

<i class= ' icon ' ></i><span> This is the text </span>span{line-height:30px;vertical-align within the span tag: Middle;} I{vertical-align:middle;}

(3), Picture horizontal vertical Center

Might

Figure Four

Principle:

There is a blank ghost node in the blank P (invisible, but there are blank elements, example four).

When setting the text-align, inline element text and picture will be centered, we let the blank Ghost node row height and the p height of the same, so you can achieve vertical center, the image and ghost blank node default baseline alignment, then the picture will be displayed, We set the image vertical-align to middle can achieve the image of the effect of the approximate center.

If you want to make the picture completely vertical center, we can let P font-size:0, because the different font display effect is different, some sinking, some just the midline alignment, when the font-size:0, the text becomes a point, there is no difference between the different fonts.

(4), multi-line text vertically centered

Figure Five

Figure Six

Principle:

We can think of span as a picture, so the principle is similar to the vertical center of the image. It is necessary to set the element display of span to Inline-block and reset the Line-height and text-align.

Why display cannot be an inline attribute, and if it is an inline element, because the parent element's line-height is too high at this point, the child element is not set to a very small row (because Line-height does not reach the height of the parent element row Heights, So it seems to be invalid), like in margin because of floating or absolute positioning of the invalid reason, I in another margin article has introduced, CSS margin in-depth understanding, if interested can go to see, If you set a child element Line-height set a lot of words is useful, so only the span element is the Inline-block element, Inline-block has a wrapper, so the figure six effect.

If the container is adaptive height and cannot get the height, then we can have the outer container centered on the table element.

"Recommended"

1. Free CSS Online video tutorial

2. CSS Online Manual

3. php.cn Lonely Nine-base (2)-css video tutorial