Detailed explanation of CSS line-height and height

Recently, when I was working on CSS interfaces, I often encountered the two attributes of line-height and height. I never really understood them. Today, I took the time to look them up online and I have some understanding of them. https://blog.csdn.net/a2013126370/article/details/82786681 This blogger wrote very well. At least it gave me a deeper understanding of line-height and height. It is worth learning from.

1. Some basic concepts

1. Line height refers to the vertical distance between the baselines of text lines (also called line spacing)

2. Line spacing is the distance between the bottom line of the previous line and the top line of the next line

From my personal understanding, we can draw the following conclusions:

1. When the height attribute of div is not set, the height of div changes according to the size of line-height and is not affected by font-size.

2. Height is used to set the height of elements, such as the height of img, the height of div, etc. The line-height property is used to set line spacing (line height), and the two are not the same concept.

2. Code Examples

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>sdds</title>
        <style>
            html,body,div{
                margin: 0;
                padding: 0;
                border: 0;
            }
            .bg0{
                width: 200px;
                height: 45px;
                line-height: 100px;
                background-color: red;
                font-size: 10px;
                word-wrap:break-word;
            }
            .bg1{
                width: 200px;
                height: 10px;
                background-color: green;
            }
            .bg2{
                width: 200px;
                height: 45px;
                background-color: yellow;
            }
            .bg3{
                width: 200px;
                height: 55px;
                background-color: blue;
            }
        </style>
    </head>

<body>
    <div class="bg0">Shanghai University (SHU) is a 211 university</div>
    <div class="bg1"></div>
    <div class="bg2"></div>
    <div class="bg3"></div>
</body>
</html>

Running results:

Conclusion: It can be seen that the sum of the heights of the yellow background div and the blue background div is the line-height=100px set for the div with class name bg0, and the height=45px set for the first part of the red div is obtained by subtracting fontsize from line-height and dividing by 2, that is, (100-10)/2=45px.

The above is a detailed explanation of CSS line-height and height. For more information about CSS line-height and height, please pay attention to other related articles on 123WORDPRESS.COM!

<<: Teach you how to use AWS server resources for free

>>: Use PS to create an xhtml+css website homepage in two minutes