内联块div上的线高向下推其他内联块兄弟

问题描述

我正在试验line-height属性，并从MDN中读取：

在未替换的内联元素上，它指定用于计算线框高度的高度。

但是，在以下情况下，我在.one上设置了行高，但是它也会影响所有其他div的高度。为什么会这样？

在将line-height属性设置为.one之前：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
       body{
           margin: 0;
           padding: 0;
       }

        .container {
            position: absolute;
            left: 25%;
            top: 30%;
            border: thick solid grey;
            width: 50vw;
            line-height: 100px;
        }
        .item {
            width: 100px;
            height: 100px;
            margin: 10px;
            color: white;
            display: inline-block;
            border: thick solid black;
            
         
        }

        #one {
            background-color: red;
            color: black;
            
        }
        #two {
            background-color: green;
            width: 150px;
            height: 150px;
        }
        #three {
            background-color: lightblue;
            width: 50px;
            height: 50px;
        }
        #four {
            background-color: coral;
            width: 20px;
            height: 300px;
           
        }
       #five{
           background-color: grey;
           width: 160px;
           height: 180px;
          
       }
   

    </style>
</head>
<body>
    <div class="container">
        <div id="one" class="item">A</div>
        <div id="two" class="item">B</div>
        <div id="three" class="item">C</div>
        <div id="four" class="item">D</div>
        <div id="five" class="item">E</div>
    </div>
  
</body>
</html>

在line-height上设置.one属性后：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
       body{
           margin: 0;
           padding: 0;
       }

        .container {
            position: absolute;
            left: 25%;
            top: 30%;
            border: thick solid grey;
            width: 50vw;
            line-height: 100px;
        }
        .item {
            width: 100px;
            height: 100px;
            margin: 10px;
            color: white;
            display: inline-block;
            border: thick solid black;
            
         
        }

        #one {
            background-color: red;
            color: black;
            line-height: 200px
        }
        #two {
            background-color: green;
            width: 150px;
            height: 150px;
        }
        #three {
            background-color: lightblue;
            width: 50px;
            height: 50px;
        }
        #four {
            background-color: coral;
            width: 20px;
            height: 300px;
           
        }
       #five{
           background-color: grey;
           width: 160px;
           height: 180px;
          
       }
   

    </style>
</head>
<body>
    <div class="container">
        <div id="one" class="item">A</div>
        <div id="two" class="item">B</div>
        <div id="three" class="item">C</div>
        <div id="four" class="item">D</div>
        <div id="five" class="item">E</div>
    </div>
  
</body>
</html>

解决方法

line-height正在影响所有其他兄弟姐妹，因为他们对其应用了display: inline-block，这意味着他们应该彼此“内联”。

设置line-height时，它会增加共享同一行的所有元素的行高；如果您将.item css display属性更改为块级元素，则会发现行高不会影响其同级，因为它们不共享相同的“行”。

html line-height

内联块div上的线高向下推其他内联块兄弟

问题描述

解决方法

相关问答