内联块 div 上的行高向下推其他内联块兄弟[重复]答案

【问题标题】：Line height on inline-block div pushing down other inline-block siblings [duplicate]内联块 div 上的行高向下推其他内联块兄弟[重复]
【发布时间】：2020-08-31 17:39:51
【问题描述】：

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

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

但是，在下面的例子中，我将 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>

【问题讨论】：

vertical-align: top; 放在物品上
@epascarello 我不是想对齐 div，而是很好奇为什么“div class= 'one'”上的 line-height 属性会影响其兄弟姐妹的位置？
@epascarello 添加的副本仍然是相关的，是您理解问题所需要的。关键是在这种情况下，vertical-align 属性的默认值为baseline。基线对齐解释了一切......不确定您接受的底部答案如何解释您的问题。不说错是无关紧要的
这里的图：stackoverflow.com/a/31063197/8620333说明一切
@TemaniAfif 是的，你是对的，我一直忘记vertical-align：baseline...呃！

标签： html css line-height

【解决方案1】：

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

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

【讨论】：