Line-height and Vertical-align in CSS two examples of attributes

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.

Line-height

Defined

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

Defined

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:baselinebaseline (the baseline of the element is aligned with the parent element's baseline)   vertical-align:sub (lowers the baseline of the element to the appropriate subscript position of the parent element)   Vertical-align: Super (raises the baseline of the element to the appropriate superscript position of the parent element)   Vertical-align:bottombottom (aligns the bottom of the aligned child elements with 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 child element to the top of the   row box)   Vertical-align:text-top (aligns the top of the element with 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 shifted up and down from the baseline npx)   vertical-align:x% (relative to the line-height value of the element)   Vertical-align:inherit (the value of the Vertical-align property is inherited 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

Application

"1" single-line text horizontally vertically centered

p{       line-height:100px;       width:100px;       Text-align:center;       border:1px solid black;   }     <p> Test Text </p>

[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 the right, the text in a row itself is vertically centered display

"2" picture is approximately vertically centered

p{       line-height:200px;       Text-align:center;   }   img{       vertical-align:middle;   }   <p>        </p>

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<p> </p>//correct 2<p><!--here to wrap or space-- </p>//error <p></p>

"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

p{line-height:200px; text-align:center; font-size:0;} img{Vertical-align:middle;}

<p> </p>

"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

p{       height:100px;       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;   }

<p> <i></i><span> I'm a particularly long, particularly long, particularly long,    multi-line text </span>  </p>

"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;}

Using baseline will cause the icon to be biased, the use of Top/bottom will be influenced by other inline elements, and the use of middle requires the exact font size and compatibility, using text-bottom more appropriately, not affected by the row height and other inline elements.