当应用边距和填充时，为什么 <span> 会在 <div> 之外中断？答案

【问题标题】：Why does <span> break outside <div> when margin and padding is applied?当应用边距和填充时，为什么 <span> 会在 <div> 之外中断？
【发布时间】：2015-06-26 14:05:07
【问题描述】：

我知道这是非常基本的 CSS。如何保持跨度包含在 div 中？目前，跨度超出了 div 的顶部和底部。

div {
  width: 200px;
  margin: 10px;
  background-color: #ff0;
}
span {
  margin: 5px;
  padding: 5px;
  background-color: #fc0;
}

<body>
  <div>
    <span>span</span>
  </div>
</body>

【问题讨论】：

标签： html css

【解决方案1】：

要回答您的问题，这不仅仅是padding 或margin 的问题，还有width、display 和box model 的问题。

jsFiddle

span {
    display: inline-block;
}

这将尊重您应用于跨度的任何填充、边距或宽度。

【讨论】：

这很有趣。正如您所说，它确实尊重填充和边距。但是，我实际上希望跨度延伸到其父 div 的宽度。我应该将宽度应用于跨度吗？
@user1405195 是的，对跨度应用宽度将达到您想要的结果。使用 5 像素的边距和填充，将 180 像素的宽度应用于跨度应该可以。
@user1405195 我更新了 jsFiddle 以演示宽度如何与内联块元素一起使用。
好吧，如果你将两个宽度设置为完全相同，那么 span 会脱离父 div。唯一值得尊重的是宽度的手动偏移。

【解决方案2】：

内联元素不会占用垂直填充和边距空间。您可以设置跨度display: block，但没有更多细节我不知道这是否能实现您的目标。

【讨论】：

谢谢马修。这样做似乎应用了垂直填充而不是边距。

【解决方案3】：

内联非替换框（例如 span）的垂直填充、边框和边距从内容区域的顶部和底部开始，与“行高”无关。但在计算行框高度时只使用“行高”。因此，您会在此处看到重叠：http://jsfiddle.net/Q9AED/

如果您想使用简单的解决方案，可以使用 line-height 而不是 display: inline-block: using line-height。

display: inline-block 适用于 Safari >= 2, Opera >= 9, IE >= 8, Firefox > 3。但是你可以在 IE

【讨论】：