See it in the project line-height：1So let's summarize line-heightthe properties.
line-height
definition
line-heightproperty sets the distance between rows (row height).
line-heightNegative values are not allowed.
possible values for the attribute
| value | describe |
|---|---|
| normal | default. Set reasonable line spacing. |
| number | Sets the number that will be multiplied by the current font size to set the line spacing. |
| length | Set a fixed line spacing. |
| % | Percentage line spacing based on the current font size. |
| you inherit | Specifies that the value of the line-height attribute should be inherited from the parent element. |
line-heightand font-sizethe relationship between:
行距=line-height - font-size；
line-height=它的数字*font-size；
line-height: 1
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>line-height</title>
<style>
div {
border:dashed 1px #7F7F7F;
}
p {
font-size: 30px;
line-height: 1;
}
</style>
</head>
<body>
<div>
<p>This is a sentence!<br/>This is a sentence!</p>
</div>
</body>
</html>
Page effect:
As in the example above, line-height:1;that is font-sizethe size of . It is set font-size：30px, and line-height:1escaped, that is to say: line-height:30px, that is, the line height is 30px.
line-height：1px
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>line-height</title>
<style>
div {
border:dashed 1px #7F7F7F;
}
p {
font-size: 30px;
line-height: 1px;
}
</style>
</head>
<body>
<div>
<p>This is a sentence!<br/>This is a sentence!</p>
</div>
</body>
</html>
Page effect:
The line spacing is 1px. At this time, the line spacing of the upper and lower lines is 1px, which is close to coincidence.
line-height：100%
The line height can be inherited, but it is not simply copying the line height of the parent element, but the calculated value is inherited.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>line-height</title>
<style>
div {
border:dashed 1px #7F7F7F;
font-size: 20px;
line-height: 100%;
}
p {
font-size: 30px
}
</style>
</head>
<body>
<div>
<p>This is a sentence!<br/>This is a sentence!</p>
</div>
</body>
</html>
Page effect:
If the parent element line-heighthas a unit (px,%), then the inherited value is the converted pxvalue of a specific level. In the above example, it is 20px*100%=20px, and the font size is 30px, so overlap occurs.