<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html {
font-size: 100px;
}
span {
font-size: 12px;
line-height: 12;
}
</style>
</head>
<body>
<p>
<span>dsflfij</span>
</p>
</body>
</html>p的高度变得很高
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
The line-height value of your span is set to 12.
According to regulations, when the line height is set to a number, the calculated value of the line height is the corresponding multiple of its own font size. Specifically, in your question, it is 12x12=144. In this case, the height of p should be 144px (not counting the border) ) is correct, but we can see through the inspection element tool that the final height of p is 161px (not counting the border).
This actually involves the calculation of the height of the line box. The height of p is the height of its inner line box, and the height of the line box is the distance between the highest point and the lowest point in the line box (The line box height is the distance between the uppermost box top and the lowermost box bottom). Let’s take a look at the demo below. In order to facilitate observation, the span element is turned into a line block element (with height), the background color is set to light gray, and a letter x is placed after the span. The line at the bottom of the x can be regarded as the baseline of the line box where the span is located.
http://codepen.io/zengkan0703...
When we set the vertical-align value of span to middle, such as box2, we can see that the highest and lowest points of the line box are span elements. At the highest and lowest points, the final height of p is the ideal 144px. When the vertical-align value of span is the default baseline, such as box1, in order to align with the baseline of the line box, the span element will move downward. The highest point of the line box becomes the highest point of the anonymous inline box x, and the lowest point is still span. The lowest point, so the height of the line box will become 161px.
Problem with line-height in css
A very important use ofline-height is to allow our text to be vertically centered in the parent element, but we will also encounter some problems when using it.
Let’s look at an example first, as shown below:
The code is also very simple, that is, when the font we defined in p is very large, we see some gaps between the font and the parent element. So why is this?
Let’s check the definition of line-height, as follows:
normal default. Set reasonable line spacing.
number sets a number that will be multiplied by the current font size to set the line spacing.
length sets fixed line spacing.
% Percent line spacing based on the current font size.
inherit specifies that the value of the line-height attribute should be inherited from the parent element.
So in the above situation, if we want our font to fill our container, we need to add the line-height attribute to the parent container with a value of 100%
The code and effect are as follows:
So why does the above problem occur?
The difference between the calculated values of line-height and font-size (line spacing) is divided into two halves and added to the top and bottom of a text line content respectively.
So, the following formula can be derived:
White space = line-height – font-size
So, when the line-height value is set to 100%, the line-height value is equal to the font-size size, and the white space at this time is 0.
Come on, take a few steps.
The first step is the inheritance of attributes.
pdoes not have its own definedfont-sizeandline-height, so it inherits fromHTMLand getspwith the following calculated value:The second step is to understand the row height. Based on the above calculated values, assuming that the user agent (i.e. browser) uses the
line-heightusage value as1.15, then the actual row height ofpis115px. The so-called row height is the minimum height of the row box.The third step is to understand the line box. The concept is complicated, please see my last link for details. The height of the line box is from the top of the uppermost inline box to the bottom of the lowermost inline box (there is also the factor of
vertical-align, here (not shown) and includes this minimum height (this minimum height is achieved through virtual "pillars", not shown), in your code,phas only one line box, and this line box has only one inline boxSPAN, and the line height of this inline box is12px * 12, which is greater than the minimum height115px, so the actual height of this line box is144px.The fourth step,
ptakes the height from its top to its last line box (only one in this case), that is,144px.So, when you increase the
HTMLoffont-size, the row height usage value ofpwill also change accordingly. Once this value exceeds the height ofSPAN, it will become the height ofp.For detailed principles, please refer to: https://segmentfault.com/a/11...
Because font-size can be inherited, the font-size of p will also become larger after you write it like this.
And one thing to note is the line-height inside 12! = 12px, please check the difference on Baidu
Font-size is an inheritable attribute. After you write this, p inherits the font-size: 100px attribute of html, so the font-size of p also becomes larger because you set the font-size of span. , so it feels like p becomes very high.