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

Question

我正在试验行高属性，并从 MDN 中读到：

On non-replaced inline elements, it specifies the height that is used to calculate line box height.

但是，在下面的例子中，我将 line-height 设置为 .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>

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

<!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>

Answer 1

line-height 影响所有其他兄弟姐妹，因为他们已应用 display: inline-block，这意味着他们应该 'inline' 彼此。

当设置 line-height 时，它会增加共享同一行的所有元素的行高；如果您要将 .item css display 属性更改为块级元素，您会注意到行高不会影响它的兄弟姐妹，因为它们不共享相同 'line'.

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

Line height on inline-block div pushing down other inline-block siblings

html

css

line-height