Html 为什么<；span>；在外面休息<；部门>；何时应用边距和填充？

我知道这是非常基本的CSS。如何保持div中包含的跨度？此时，跨度延伸至div顶部和底部之外

div{
宽度：200px；
利润率：10px；
背景色：#ff0；
}
跨度{
保证金：5px；
填充物：5px；
背景色：#fc0；
}

跨度

内联元素不会占用垂直填充和边距空间。您可以使span

显示：block

，但没有更多细节，我不知道这是否能实现您的目标。

回答您的问题，这不仅仅是

填充

或

边距

的问题，还有，和

---

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

内联、未替换框（例如跨距）的垂直填充、边框和边距从内容区域的顶部和底部开始，与“行高”无关。但在计算线框高度时，仅使用“线高度”。因此，您可以在此处看到重叠：

如果要使用简单的解决方案，可以使用线条高度而不是显示：inline block:

---

显示：内联块在Safari>=2、Opera>=9、IE>=8、Firefox>3中工作。但是您可以在IE中模拟内联块<8:display:inline；缩放：1。

谢谢Matthew。这样做似乎应用了垂直填充，而不是边距。这很有趣。正如你所说，它确实尊重填充和边距。但是，我实际上希望跨距延伸到其父div的宽度上。是否应该对跨距应用宽度？@user1405195是的，对跨距应用宽度将达到您想要的结果。使用5px的边距和填充，将180px的宽度应用于跨度应该有效。@user1405195我更新了JSFIDLE，以演示宽度如何与内联块元素一起工作。如果将两个宽度设置为完全相同，则跨度将脱离父div。唯一值得一提的是手动偏移宽度。

span {
    display: inline-block;
}