Question

下面的代码

<!DOCTYPE html>
<html>
<head>
<style>
*{
margin:0;
padding:0;                
}

.container{
border:5px solid green;
height:200px;
width:200px;
padding:10px;

}
span {
border:5px solid red;  
}


p {
border:5px solid brown;
}


</style>
</head>
<body>
<div class="container">
<span class="span1">This is a span 1 </span><p class="para1">This is a para 1</p>
</div>
</body>
</html>

executed image sample

“上面的代码创建跨度底部边框与棕色段落顶部边框重叠”，为什么这样，为什么段落顶部边框不在跨度底部边框上方。

我已阅读到内联元素的下边框和上边框属性将被忽略，但我无法理解上述情况。

Answer 1

这是因为它们的边距设置为0，所以它们的边界在同一位置

Answer 2

在填充，边框和边距中，内联元素唯一忽略的是顶部和底部边距，因此它们将与放置在顶部和底部的元素重叠。他们甚至可以左右留边。

在增加行内元素的填充时，您会期望有相同的重叠。

Answer 3

内联元素没有适当的heigth属性（请参阅更多here）。

由于span没有任何height，因此p将显示在span的正下方（而不是在其边界下方），并且您的span和p将重叠。

可能在内联元素之前处理了块元素，这可能就是span（内联元素）边界在p（块元素）上方的原因。但这在不同的浏览器上可能会改变。（但这只是一个理论，不要为此付出太多的荣誉）

无论如何，如果要将p标签的顶部边框显示在span标签的底部边框下方，一种解决方法是使用display : inline-block;：

span {
    border: 5px solid red;
    display: inline-block;
}

跨度元素底部边框与段落元素顶部边框重叠

3 个答案: