How to use line-height in CSS

This article is about how to use line-height in CSS. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

.test {border:1pxsolid#ccc; height:100px; width:100px;}

But as we know it, when we don't set the height for the element, but there is content in the element, the element still gets the height:

.test {border:1pxsolid#ccc; width:100px;} 1

Why div got the height, not because the text held up the height, but because line-height propped up the div. Compare the code on both sides.

.test {border:1pxsolid#ccc; width:100px; line-height:100px;} 1 .test {border:1pxsolid#ccc; width:100px; line-height:0;} 1

The obvious result is that there is a height because of height, and without height, there is a high degree of detail because of line-height. Actually, every line of text has a lineboxes, and these boxes naturally support the height of the parent element.

At the same time, if you look at the above example, you can see that the center line of the text is in the same position as the center line of the line-height, so there is the commonly used method of centering:

.test {line-height:100px; height:100px;}

Setting the same value of line-height and height can make the text center vertically.

This is true in terms of the result, but this sentence is not true. There are a few more words in this sentence. There is no need to set height at all, only line-height is needed to center the text vertically.

Thank you for reading! This is the end of the article on "how to use line-height in CSS". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!