Home > Developer > Web Develop
What is line-height (row height)? What is the difference between Line-height settings 1.5 and 150%? This is a more common CSS interview problem, with this problem to look down. Does the so-called row height refer to a line in a piece of text? Not specifically. W3school is defined in this way:
The Line-height property sets the distance (row height) between rows, which affects the layout of the row box, and when applied to a block-level element, it defines the minimum distance, not the maximum distance, between the baselines in the element.
What is a baseline? The baseline is not the bottom of the Chinese character, and from the English alphabet, the bottom of the letter A, B, C is where the baseline is, and the text default vertical alignment is the baseline and baseline Alignment (baseline), and the Blue line in the figure below is the baseline.
Then the height between the baseline and the baseline is called the row height line-height. NOTE: block-level elements are only row high.
Line-height has 5 possible values, namely normal, number, length,%, inherit. Introduction:
If the text is not intuitive enough, look at the following demo:
<HTML><Head> <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /> <Metaname= "Viewport"content= "initial-scale=1.0, User-scalable=no" /> <title>Line-height</title><styletype= "Text/css">P{font-size:20px;width:200px;}P.c1{Line-height:Normal} /*under LINE-HEIGHT:24PX Chrome. Line-height is 1.2 times times the size of Font-size*/P.C2{Line-height:1.5;} /*line-height = 20*1.5 = 30px*/p.c3{Line-height:30px;} /*line-height:30px*/p.c4{Line-height:150%;} /*line-height = 20*150% = 30px*/</style><Scripttype= "Text/javascript"src= "Http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.2.min.js"></Script></Head><Body><Pclass= "C1">The difference between the calculated values of the Line-height and Font-size (which becomes "line spacing" in CSS) 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.</P><Pclass= "C2">The difference between the calculated values of the Line-height and Font-size (which becomes "line spacing" in CSS) 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.</P><Pclass= "C3">The difference between the calculated values of the Line-height and Font-size (which becomes "line spacing" in CSS) 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.</P><Pclass= "C4">The difference between the calculated values of the Line-height and Font-size (which becomes "line spacing" in CSS) 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.</P><Scripttype= "Text/javascript">$("P"). each (function() {Console.info ($ ( This). CSS ("Line-height") )})</Script></Body></HTML>View Code
You will find that when Line-height is set to 1.5 and 150% the effect is the same. So what's the difference between a scaling factor and a percentage for line height? The difference is in inheritance, when the row height of element A is set to the scaling factor, the child B of the A element inherits the scaling factor and multiplies the scale factor by the font-size of B to get the row height of the B element, and when the row height of element A is set to a percentage, the row height of element A's child element B inherits directly from the row
For example, there are two elements a, b, and Element B is a child element of element A:
When parent element a sets the row height to the scale factor
Element a font-size:14px; line-height:1.5; Calculate the height of 14*1.5 = 21px;
Element b font-size:28px; line-height:1.5 (inherited); the calculation is 28*1.5 = 42px;
When parent element a sets the row height to a percentage
Element a font-size:14px; line-height:150%; Calculate the height of 14*150% = 21px;
Element b font-size:28px; directly inherit the parent element A's row height computed value 21px, at this time B's row height is smaller than font-size, will cause the text inside the B element to overlap, the code is as follows
<HTML><Head> <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /> <Metaname= "Viewport"content= "initial-scale=1.0, User-scalable=no" /> <title>Line-height</title><styletype= "Text/css">. C1{font-size:14px;Line-height:1.5;width:200px;}. C2{font-size:28px;}. c3{font-size:14px;Line-height:150%;width:200px;}. c4{font-size:28px;}</style></Head><Body><Divclass= "C1">the difference between the calculated values of the Line-height and Font-size (which becomes "line spacing" in CSS) 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. <Pclass= "C2">The difference between the calculated values of the Line-height and Font-size (which becomes "line spacing" in CSS) 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.</P></Div><Divclass= "C3">the difference between the calculated values of the Line-height and Font-size (which becomes "line spacing" in CSS) 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. <Pclass= "C4">The difference between the calculated values of the Line-height and Font-size (which becomes "line spacing" in CSS) 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.</P></Div></Body></HTML>View Code
Therefore, to avoid this, it is recommended that you set the scaling factor for row heights, avoiding the use of percentages or specific values.
This article address http://www.cnblogs.com/wangmeijian/p/4222908.html by Wang Meijian
The Line-height of CSS Foundation
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
