如何从浮动图像中删除额外的边距底部？

Question

当我们<img>在里面使用时,我们<p><img style="float:left">dummy text dummy text dummy text dummy text</p>怎样才能在图像的右下角有相同的边距？

http://jitendravyas.com/image-margin.htm

Answer 1

使用属性vertical-align:bottom; 要成像,那么底部的额外空间将被删除.

Answer 2

解决方案应该是：

<style>
img{
    float: left;
    margin: 0 20px 20px 0;
    background-color: #CCC;
}

p{
    clear: left;
    margin: 0px;
}
</style>

<p><img height="100" width="100" />dummy text dummy text dummy text dummy text</p>
<p>here some text</p>

您可以通过应用“clear: left;”来清除浮动。到“p”之后的任何标签。但是，我更喜欢下面的解决方案（它也解决了“p”标签的包含问题）：

<style>
img{
    float: left;
    margin: 0 20px 20px 0;
    background-color: #CCC;
    }
p{
    margin: 0px;
    }

div.clearer{
    clear: left;
    }

#container{
    width: 300px;
    border: 1px solid #CCC;
}
</style>

<div id="container">
    <img height="100" width="100" />
    <p>dummy text dummy text dummy text dummy text</p>
    <div  class="clearer"></div>
</div>
<p>here some text</p>

编辑：即使在您的示例中，我的建议也是相同的（但是，在本示例中，您可以删除应用于“p”标记的“clear:left”，并且您不能使用我建议的第二种方法） ！标签“p”和“img”的行为，在示例中，这是正常的......我尝试解释一下：

如果将段落的行高设置为 20px（字体大小 < 20px），并将 img（高度为 20 的倍数）的边距（底部和右侧）设置为 20px，则底部的行如果图像下方没有至少 40 像素（20 像素边距底部 + 20 像素行高），则图像将被迫向右分割！这很正常，因为没有足够的空间容纳 20px 高度的线！

因此，您可以选择或将边距设置为小于 20px 的值或减小行高！