填充元素的位置:相对

时间:2017-08-22 19:10:45

标签: html



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;
&#13;
&#13;

为什么第二行填充流过第一行,两者都是相同的span元素?

1 个答案:

答案 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>

预览

preview