我正在试验行高属性，并从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> -
在
.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>line-height正在影响所有其他同级，因为它们应用了display: inline-block，这意味着它们应该彼此"内联"。
当设置line-height时，它增加了共享同一行的所有元素的行高；如果您将.itemcssdisplay属性更改为块级元素，您会注意到线的高度不会影响它的同级，因为它们不共享同一条"线"。