Html 为什么在一个元素中使用“文本”；显示：内联；线条高度：0“；，在不同的行中还有不同的yAxis位置吗？

下面代码的高度将超过单行“a”

<span style="display:inline;line-height:0;">aaaaaaaaaaaaaaaaaaaaaa</span>

<span style="display:inline-block;line-height:0;">aaaaaaaaaaaaaaaaaaaaaa</span>

aaaaaaaaaaaaaaaaaaaa

下面代码的高度将保持不变，与单行“a”的高度相同

<span style="display:inline;line-height:0;">aaaaaaaaaaaaaaaaaaaaaa</span>

<span style="display:inline-block;line-height:0;">aaaaaaaaaaaaaaaaaaaaaa</span>

aaaaaaaaaaaaaaaaaaaa

下面的代码显示了这两种外观

文件
.家长{
边框：1px纯红；
利润率：100像素；
宽度：300px；
}
.儿童1{
显示：内联；
线高：0；
字体大小：50px；
单词break：打破一切；
}
.儿童2{
显示：内联块；
线高：0；
字体大小：50px；
单词break：打破一切；
}       
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

要获得相同的结果，您需要对父容器应用相同的

字体大小

和

行高

.parent{
边框：1px纯红；
利润率：100像素；
宽度：300px；
}
.儿童1{
显示：内联；
/*线高：0；
字体大小：50px*/
单词break：打破一切；
}
.儿童2{
显示：内联块；
线高：0；
字体大小：50px；
单词break：打破一切；
}

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

这是否回答了您的问题？你能突出你所说的区别吗？两个代码段看起来都一样，即使它们的产品并不完全相同output@Reyno我不这么认为，我的问题的关键是“inline”和“inline block”之间的行高行为不同@temaniaf如果我粘贴了完整的代码，谢谢你的帮助谢谢你的回复。但我还是很困惑。在第一种情况下，为什么内联元素不继承父

-block

部分的行高（值为0）container@WilkinWendy没有继承性，因为您将属性应用于内联元素而不是父元素。这就是为什么您需要将其应用于父元素，以便内联元素将继承它，并且您具有与内联块相同的输出更令人困惑的是，正如我所知，线高度意味着不同基线之间的距离，但在我的第二种情况下，距离显然超过0，你能解释一下吗？@WilkinWendy，因为我们没有将父对象的线高度设置为0。这就是问题所在。仅设置内联元素的行高度是不够的。父对象的线高度定义了您要测量的距离。相关问题：