p {
border: 1px solid red;
width: 200px;
padding: 10px;
}
span {
position: relative;
background-color: #ccc;
color: crimson;
padding: 6px;
}

<p>
<span>We're studying second line padding</span>
</p>
&#13;
为什么第二行填充流过第一行,两者都是相同的span元素?
答案 0 :(得分:0)
这是因为<span>
是一个内联元素,它不介意顶部和底部的填充。内联元素倾向于与内容一起流动,也不尊重顶部和底部的盒子模型。因此,将<span>
元素设为inline-block
:
span {
position: relative;
background-color: #ccc;
color: crimson;
padding: 6px;
display: inline-block;
}
<强>段强>
p {
border: 1px solid red;
width: 200px;
padding: 10px;
}
span {
position: relative;
background-color: #ccc;
color: crimson;
padding: 6px;
display: inline-block;
}
<p><span> We're studying second line padding</span></p>
预览强>