Home > Developer > Web Develop
First into the front-end when the CSS know that display, position, float can be in the layout of the ease, with the future work problems emerge, only gradually learned that CSS is not a few style attributes so simple, recently read some knowledge about the line of high, summarize this.
The so-called row height refers to the vertical distance between the baseline of a text line. To understand this sentence, you must first understand a few basic knowledge:
top line, midline, Baseline, bottom line<!DOCTYPE HTML><HTML> <Head> <title>Test</title> <styletype= "Text/css" >span{padding:0px;Line-height:1.5; } </style> </Head> <Body> <Divclass= "Test"> <Divstyle= "Background-color: #ccc;"> <spanstyle= "Font-size:3em;background-color: #999;">Chinese 中文版</span> <spanstyle= "Font-size:3em;background-color: #999;">中文版 Chinese</span> </Div> </Div> </Body><HTML>
From top to bottom four lines are line, line, Baseline, bottom line, very much like learning English letter four line three, we know that the Vertical-align attribute has top, middle, baseline, bottom, is related to these four lines.
In particular, the baseline is not the lowest line, the bottom is the base line.
Row height, line spacing, and semi-spacingRow height refers to the vertical distance between the baseline of the context line, which is the vertical distance between the two red lines in the graph.
Line spacing is the vertical distance from the bottom line to the top of the next line, the vertical distance between the first row of pink and the Green Line of the second row.
Half-line spacing is half the line spacing, that is, the area 3 vertical distance/2, the sum of the distance of the area 1,2,3,4 is the row height, and the area 1,2,4 distance is the font size, so the half-line spacing can also be counted as follows: (row height-font size)/2
Content area, inline box, row boxcontent area: The area where the bottom and top lines are wrapped, that is, the dark gray background area.
inline box, each inline element generates an inline box, which is a concept in a browser rendering model that cannot be displayed, in the absence of other factors (padding, etc.), the inline box equals the content area, and the height of the line is constant when the row height is set, half-spaced " (Row height-font size)/2 "increase/decrease to the upper and lower sides of the content area (dark blue area) respectively
Line box, the line box refers to the bank's virtual rectangular box, which is a concept in the browser rendering mode and is not actually displayed. The height of the row box is equal to the maximum value of the inner box of all elements in the line (the highest row height box is the base, the other inline boxes are aligned to the datum in their own alignment, and the height of the row box is calculated), and each row has its own row box when there are multiple lines of content.
Line-height< div style = "Background-color: #ccc;" ; < span style = "Font-size:1em;background-color: #666;" ; Chinese English </ span ; < span style = "Font-size:3em;background-color: #999;" ; Chinese English </ span ; < span style = "Font-size:3em;background-color: #999;" ; English Chinese </ span ; < span styl E = "Font-size:1em;background-color: #666;" ; English Chinese </ span ; </ div >
The basic concept is understood, so we can talk about the protagonist Line-height attribute of this article.
Definition: The Line-height property sets the distance (row height) between the lines and cannot use negative values. This property affects the layout of the row box. When applied to a block-level element, it defines the minimum distance, not the maximum distance, between the baselines in the element. The difference (line spacing) between the calculated values of Line-height and font-size is divided into two halves, which are added to the top and bottom of a text line content. The smallest box that can contain the content is the row box.
Possible values
| Value | Description |
| Normal | By default, set a reasonable line spacing. |
| Number | Sets the number that is multiplied by the current font size to set the line spacing. Equivalent multiples |
| Length | Sets the fixed line spacing. |
| % | The percentage line spacing based on the current font size. |
| Inherit | Specifies that the value of the Line-height property should be inherited from the parent element. |
Seems very simple, but feel nothing to use the appearance, then let us look at several applications of Line-height
Div text is centered verticallyDiv Center alignment has always been a problem, the level is OK to solve some, margin:0 auto; Can solve the modern browser, ie under Text-align:center. But the vertical center is not so simple, the default is this.
<style= "Width:150px;height:100px;background-color: #ccc;" > < span > This is a test. < BR /> This is a test. </ span > </ Div >
We can use Line-block to do this.
<style= "Width:150px;height:100px;line-height:100px;background-color: #ccc; font-size:0; " > < style= "display:inline-block;font-size:10px;line-height:1.4em;vertical-align:middle;" > This is a test. < BR /> This is a test. </ span > </ Div >
Single line is relatively simple, the line-height is set to box size can be used to achieve the vertical center of single-line text
Influence of element on row height<style= "line-height:100px;border:dashed 1px #0e0;" > This is a test. </ Div >
The row box height is the highest inline box height in the row, adjusted by Line-height, the height of the content area is related to the font size, and padding does not affect the row height.
<style= "border:dashed 1px #0e0; margin-bottom:30px;" > < style= "Font-size:14px;background-color: #999;" > This is a test</span> </div> <style= "border:dashed 1px #0e0;" > < style= "Font-size:14px;padding:20px;background-color: #999;" > This is a test</span> </div>
The second span, although the content area becomes larger because of the padding reason, does not change when the row height
Inheritance of Row heightsRow heights are inheritable, but not simple copy of the parent element row height, inherited by the computed value.
<style= "border:dashed 1px #0e0; line-height:150%;font-size:10px;" > < style= "font-size:30px;" > 1232<br/> 123 </ P > </ Div >
According to general understanding since Line-height can inherit, then the line height of the P element is also 150%, but the fact is that
Not only did not become 150%, but even 100% are not, overlapping! This is the result of the inheritance calculation, if the parent element's line-height has units (px,%), then the inherited value is a specific PX-level value after the conversion, the above example p is the 10px*150%=15px row height, and P's font size is 30px, so there is overlap.
If the property value does not have a unit, the browser inherits the "factor (value)" Instead of the calculated value, and its line-height will recalculate the new Line-height value according to its font-size value.
<style= "border:dashed 1px #0e0; line-height:1.5;font-size:10px;" > < style= "font-size:30px;" > 1232<br/> 123 </ P > </ Div >
So when using line-height, unless you deliberately try to use multiples to set the value
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
