Question

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

Answer 1

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

span {
    display: inline-block;
}

这将遵循您应用于范围的任何填充，边距或宽度。

Answer 2

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

Answer 3

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

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

显示：内联块在Safari中工作＆gt; = 2，Opera＆gt; = 9，IE＆gt; = 8，Firefox＆gt;但是你可以在IE中模仿一个内联块＆lt; 8：显示：内联; zoom：1。