20

我知道这是非常基本的 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>

4

3 回答 3

47

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

jsFiddle

span {
    display: inline-block;
}

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

于 2012-05-19T14:41:32.323 回答
3

内联元素不会消耗垂直填充和边距空间。您可以制作 span display: block，但如果没有更多细节，我不知道这是否能实现您的目标。

于 2012-05-19T14:30:18.173 回答
0

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

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

display: inline-block 适用于 Safari >= 2, Opera >= 9, IE >= 8, Firefox > 3。但你可以在 IE < 8 中模仿 inline-block: display: inline; 缩放：1。

于 2012-05-19T15:19:34.657 回答