这个看起来像webkit中的文本包装bug,还是我想念的东西？
DOM：
<div>
<p>
<img src="http://static.jsbin.com/images/favicon.png">
no sea takimata sanctus estestest Lorem ...
</p>
</div>
CSS：
div {
width: 200px;
}
p {
margin-right: 32px;
padding-left: 30px;
}
img {
float: left;
margin-left: -30px;
}
演示：http://jsbin.com/onoced/1/edit
截图：
解决方法
我不会说这是一个bug,正如你所指出的那样：它在WebKit浏览器中的表现相同.否则,我们必须将浏览器引擎之间的每个区别分类为错误.
虽然有人向Webkit.org：http://bugs.webkit.org/show_bug.cgi?id=63074报告了类似的问题
但是这不仅限于段落,同样的行为也可以在列表和标题中找到.
参见示例：http://jsbin.com/uzozus/1/edit
Webkit浏览器中对此行为的解释是：
If a negative margin is applied opposite a float,it creates a void
leading to the overlapping of content.
资料来源：http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/
让我们将其应用于您的示例：您的图像宽度为16像素乘16像素,所以为了平衡这个30像素的负边距我们必须水平添加14px
img {
float: left;
margin-left: -30px;
padding:5px 14px 0 0;
}
