Question

我认为我对CSS非常了解，但这个简单的问题让我感到困惑。

＆lt; div＆gt;＆lt; span＆gt;示例文字＆lt; / span＆gt;＆lt; / div＆gt;

如果跨度有填充，

会导致div的高度小于跨度的高度。

我意识到有一些方法可以使用“float”来正确地设置div大小，但浮动似乎总是会引入不希望的副作用。

是否有一种干净简单的方法告诉div的大小以适应其内容？对我来说似乎很基础。也许我错过了什么。

Answer 1

在基本情况下，只需在跨度上使用display: inline-block。

这是我的测试用例（适用于FF，Chrome和IE 6-8）：

<!DOCTYPE HTML>
<html>
<head>
    <title>Span padding test</title>
</head>
<body>
    <div style="background-color: yellow; border: 1px solid red;">
        <span style="padding: 50px; display: inline-block;">test</span>
    </div>
</body>
</html>

将float: left添加到div和span中的原因是因为浮动内联元素会将其隐式转换为块元素。如果您不熟悉div和span之间的细微差别（也就是块和内联元素之间的区别），那么阅读http://www.maxdesign.com.au/articles/inline/应该会有所帮助。

还有其他一些方法可以解决这个问题，但如果不了解其余的标记和样式，很难说哪一个最好。

Answer 2

将overflow:auto添加到div。

包含span的简单div将无法正确调整大小

2 个答案: