填充元素的位置：相对

Question

＆＃13;

＆＃13;

p {
  border: 1px solid red;
  width: 200px;
  padding: 10px;
}

span {
  position: relative;
  background-color: #ccc;
  color: crimson;
  padding: 6px;
}

＆＃13;

<p>
  <span>We're studying second line padding</span>
</p>

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

这是因为<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>

预览