line-height is the height of each line of text (line height). If the article is wrapped, the height of the entire box will increase (number of lines * line height)
height is a fixed value, which is the height of the box. Wrapping the article will not change the height of the box.
important point:
If the height and line-height of an element are the same, it means that the line of text is vertically centered in the element (text only, and only one line).
When line-height = height, the element will be vertically centered.
When line-height < height, the element will be upward.
When line-height > height, the element will be lower.
When verifying:height, line wrapping will not change the box height
<body>
<style>
.box{
width: 100px;
background-color: #ccc;
height: 50px;
}
</style>
<div class="box">ffffffffffsfafaafasdcvrgsvg<br>efgsbdtdrdvrsvdsrdsts<br>ggggggggggg</div>
</body>
When line-height is used, line wrapping will change the box height:
<body>
<style>
.box{
width: 100px;
background-color: #ccc;
line-height: 50px;
}
</style>
<div class="box">ffffffffffsfafaafasdcvrgsvg<br>efgsbdtdrdvrsvdsrdsts<br>ggggggggggg</div>
</body>
Analysis: After increasing, the height of the box becomes number of rows 3*row height 50 = 150;