Home > Article > Web Front-end > Detailed explanation of line-height in CSS (code example)
Detailed explanation of line-height in CSS (code example)
- 云罗郡主Original
- 2018-11-30 14:29:232748browse
What determines the height of the element is very helpful for us to solve the page display problem and layout the page. The conventional operation performance is to set the height attribute for a block-level element, then it has a height:
<style>
.test {
border: 1px solid #ccc;
height: 100px;
width: 100px;
}
</style>
<body>
<div class="test"></div>
</body>But according to common knowledge, when we do not set the height for the element and there is content in the element, the element still gets Reached height:
<style>
.test {
border: 1px solid #ccc;
width: 100px;
}
</style>
<body>
<div class="test">1</div>
</body>
Why the div gets the height? It’s not because the text supports the height, but because line-height supports the div. Compare the codes at both ends
.test {
border: 1px solid #ccc;
width: 100px;
line-height: 100px;
}
</style>
<body>
<div class="test">1</div>
</body>The effect is as follows:
.test {
border: 1px solid #ccc;
width: 100px;
line-height: 0;
}
</style>
<body>
<div class="test">1</div>
</body>The obvious result is that there is height because of height, and there is no height because of line-height. The more detailed details about height are actually because each line of text has a line box, and these boxes naturally support the height of the parent element.
At the same time, observing the above example, you can find that the center line of the text and the center line of line-height are at the same position, so there is a commonly used centering method:
<style>
.test {
line-height: 100px;
height: 100px;
}
</style>Set line -Height and the same value as height can make the text vertically centered
From the results, this is indeed the case, but this sentence is wrong. This sentence has a few extra words. There is no need to set height at all, only line -height can center the text vertically.
The above is the detailed content of Detailed explanation of line-height in CSS (code example). For more information, please follow other related articles on the PHP Chinese website!