我以为我对CSS非常了解,但这个简单的问题让我感到困惑.
< div>< span>示例文本< / span>< / div>
导致div的高度小于跨度的高度,如果跨度有填充.
我意识到有一些方法可以使用“浮动”来使div大小正确,但是浮动总是似乎引入不期望的副作用.
是不是有一个干净简单的方式来告诉div的大小适合其内容？对我来说似乎很基本.也许我错过了一些东西.
解决方法
在基本情况下,只需在span上使用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/应该是有帮助的.
