Deep understanding of Line-height and Vertical-align

Show Table of ContentsDirectory[1] Row height [2] Vertical alignment [3] ApplicationPrevious words

Line-height, Font-size, Vertical-align are key properties that set the layout of elements in a row. These three attributes are interdependent relationships, changing the distance between lines, setting vertical alignment, and so on, all of which require their co-operation . In the CSS font has been introduced in detail the relevant content of font-size, this article will mainly introduce Line-height and vertical-align. the term explained in this article refers to the basic terminology of block-level elements and the basic terms of inline elements

Line-heightdefinition

Line-height line height refers to the distance between the baseline of a text line . Row height line-height actually affects only inline elements and other inline content without directly affecting block-level elements, or you can set line-height for a block-level element, but this value only affects inline content when applied to block-level elements. Declaring Line-height on a block-level element sets a minimum row box height for the contents of the block-level element

Value: <length> | <percentage> | <number> | normal | Inherit

Initial value: Normal

Applies to: all elements

Inheritance: There are

Percent: The font size relative to the element font-size

Terms

To understand line-height in depth, you need to understand common terminology about line box construction.

Content Area

Font-size and font-family determine the height of the content area for inline non-replacement elements or portions of anonymous text. In the case of the Arial, if the font-size of one inline element is 15px, the height of the content area is 15px, while in other fonts, the height of the content area is not equal to the font size

Inline box

The content area plus the line spacing equals the inline box. If the font-size of a non-replacement element in a row is 15px,line-height to 21px, the difference is 6px. The user agent divides the 6 pixels into two, applying half to the top and bottom of the content area, which gets the inline box

When Line-height is less than font-size, the inline box is actually smaller than the content area

Line box

The row box is defined as the distance between the top of the highest inline box in the row and the bottom of the lowest inline box, and the top of each row box is next to the bottom of the row box

Box Properties

Padding, margins, and borders do not affect the height of the row box, that is, row height is not affected

Border boundaries of inline elements are controlled by font-size instead of Line-height

Margins are not applied to the top and bottom of non-replacement elements within rows

Margin-left, Padding-left, border-left apply to the beginning of the element, while Margin-right, Padding-right, and border-right are applied to the end of the element

Replace element

Inline substitution elements require the use of line-height values to correctly position elements when aligned vertically. Because the Vertical-align percent value is calculated relative to the line-height of the element. For vertical alignment, the height of the image itself is irrelevant, the key is the value of Line-height

By default, inline substitution elements are located on the baseline. If you add a lower padding, margin, or border to the replacement element, the content area moves up. The baseline of the replacement element is the baseline of the last line box in the normal flow. In this case, the baseline is the margin, unless the content of the replacement element is empty or the value of the overflow property itself is not visible.

Vertical-align definition

The vertical-align is used to set the vertical alignment, and all vertically aligned elements affect the row height

Value: Baseline | Sub | Super | Top | Text-top | Middle | Bottom | Text-bottom | <length> | <percentage> | Inherit

Initial value: Baseline

Apply to: inline element, replace element, table cell

Inheritance: None

Percentage: Row height line-height relative to Element

Note ie7-the percentage value of vertical-align in the browser does not support decimal line height, and when baseline, middle, text-bottom equivalents are not displayed in the same way as standard browsers, the common solution is to set the display of inline elements: Inline-block

Vertical-align:baseline (the baseline of the element is aligned with the parent element's baseline) Vertical-align:sub (reduces the element's baseline to the appropriate subscript position of the parent element) Vertical-align:super ( Raise the baseline of the element to the appropriate superscript position of the parent element) Vertical-align:bottom (aligns the bottom of the aligned child elements to the bottom of the row box) Vertical-align:text-bottom (aligns the bottom of the element with the bottom of the parent element's content area) Vertical-align:top (aligns the top of the aligned child element to the top of the row box) Vertical-align:text-top (aligns the top of the element to the top of the parent element's content area) Vertical-align:middle ( The vertical point of the element is aligned with the parent element's baseline plus the height of the letter x in the parent element vertical-align: (+-n) px (the element is offset from the baseline npx) vertical-align:x% (relative to the line-height value of the element) Vertical-align:inherit (inherits the value of the Vertical-align property from the parent element)

[Note]<sub> and <sup> default carry style Vertical-align:sub/super

Inline-block Bottom Gap

The Inline-block element leaves space in the block-level element because the default vertical alignment of the image is the baseline alignment (the baseline alignment is aligned at the bottom of the principle and anonymous text capital letters x), and the anonymous text is line-high, so the bottom edge of X is a distance from the line box. This distance is the space left by the image.

Therefore, there are several solutions to solve this problem

[1]display:block

Because vertical alignment can only be used to replace elements and inline elements, and change to block-level elements, the vertical alignment is invalidated

[2] Parent's line-height:0

This causes the anonymous text to be 0 from the line box

[3]vertical-align:top/middle/bottom

Apply "1" single-line text horizontally vertically centered

div{    line-height: 100px;     Width: 100px; text-align: Center; border: 1px solid black;}       

<div> Test text </div>    

[note] A lot of places are written. Vertical centering of a single line of text is the same value as the height and row heights, but the height is not necessarily set. Just set the line to work, the text in a row itself is vertically centered display

"2" picture is approximately vertically centered

div{    line-height: 200px;     Text-align: Center;} img{ vertical-align: Middle;}      

<div>    <src= "#" alt= "#"></div>  

Because the character x is not vertically centered in the EM box, the character x of each font is not in the same high and low position. Therefore, when the font size is large, this difference is more obvious

Note IE7 Browser when writing block-level elements containing inline elements, be sure to write a newline, rather than a line

Correct 1<Div><ImgSrc="#"Alt="#"></Div>Correct 2<Div><img src= "#"  Alt=" # "> <!-- here to wrap or space -->< Span style= "COLOR: #0000ff" ></div>//error <div ><img src= "#"  Alt= "#" ></div>      

"3" picture completely vertically centered

Set the block-level element's font-size to 0 on the basis of Method 2, you can set the picture to be completely vertically centered

div{    line-height: 200px;     Text-align: Center; Font-size: 0;} img{ vertical-align: Middle;}        

<div>    <src= "#" alt= "#"></div>  

"4" multiline text horizontally vertically centered

Because method 3 sets the limitations of Font-size to 0, text cannot be placed inside block-level elements. Method 4 mainly uses the new element to achieve the vertical center effect, this method can also be used for the horizontal vertical center of the picture

div{Height100px;Width 200px;  Background-color: Pink; Text-align: Center;} span{ Display: Inline-block;  Vertical-align: Middle; Line-height: 20px; Width: 100px;}  I{ Display: Inline-block;  Height: 100%; Vertical-align: Middle;}          

    <div>        <i></i><span> I am particularly long, particularly long, particularly long, especially long, multi-line text </span</div        

"5" icon and text alignment

< method one > Use negative length

img{    vertical-align: -5px;} 

Based on practical experience, 20*20 pixel icons followed by 14px text, Vertical-align set to -5px can achieve a better alignment effect

< method two > use text bottom alignment

img{    vertical-align: text-bottom;} 

The use of baseline will make the icon biased, using the top/bottom will be affected by other elements of the row positioning bias, the use of middle requires the exact font size and compatibility is not high, the use of text-bottom more appropriate, not affected by the row height and other inline elements

Deep understanding of Line-height and Vertical-align