css的问题咯

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            
            .box1{
                line-height: 1.5;
                font-size: 24px;
                width: 200px;
                height: 400px;
                display: inline-block;
                border: 2px solid #666666;
            }
            .box2{
                border: 2px solid #666;
                display: inline-block;
                line-height: 150%;
                width: 200px;
                height: 400px;
                font-size: 24px;
            }
            .box1 p{
                font-size: 40px;
            }
            .box2 p{
                font-size: 40px;
            }
        </style>
    </head>
    <body>
        <div class="box1">
            line-height:1.5
            <p>我的font-size是40px,哈哈哈哈</p>
        </div>
        
        <div class="box2">
            line-height:150%/1.5em
            <p>我的font-size是40px,哈哈哈哈
            
            </p>
        </div>
        <script>
            
        </script>
    </body>
</html>

为什么第二个div上有一段间隙，和第一个没有对齐

西兰花伟大炮

浏览 1424回答 1

1回答

qq_运着篮球的挨踢侠客丶_0

150%是根据父元素的字体大小计算出行高，并且子元素依然沿用这个计算后的行高。1.5则是根据子元素自己字体的大小去乘以1.5来计算行高。对齐方法 .box2 vertical-align: top;

0 0

随时随地看视频慕课网APP