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

有问题的图像高度

您的图像似乎超出了行高设置5px。这就是你获得这个多余空间的原因。

您只能在此图片上尝试负底边距，但文字可能过于接近。所需的负余量等于多余像素（在此图像的情况下，它是5px）。

Container DIV

然而，您可以将图像包装在容器DIV中，这些容器DIV具有精确的行高多个高度。并且还在其上设置overflow: hidden;。但我建议您将font-size和line-height设置为点（pt），以控制其值。

Answer 3

解决方案应该是：

<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（字体大小＆lt; 20px），并将img（高度为20的倍数）的边距（底部和右侧）设置为20px，则该行如果在img下面没有至少40px（20px margin-bottom + 20px line-height），则img底部被迫向右分割！这是正常的，因为没有足够的空间容纳20px高的线！

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

Answer 4

好的，看了一下页面后，这不是边距问题，而是你的字体没有任何空间包括在下一行。

尝试更改字体大小，您会看到此边距有时会减少，有时会增加。

Answer 5

这是因为它肯定是内联内容。如果要保持内容内联但删除间距，只需添加：

line-height: 0;

Answer 6

来自：http://bytes.com/topic/html-css/answers/789019-img-bottom-margin-mystery

这是因为imgs显示：inline，所以它们像文本一样位于基线上，下方有一些空间用于下行。

制作img display：block。

Answer 7

我也遇到了这个问题，我将<img> - 标记放在<div>中，并将line-height属性设置为0，从而解决了这个问题。

这是jsfiddle.net example 请注意图像与其下方<hr>之间没有空格。

这不起作用如果 你需要将图像放在文本的中间，因为图像将是它自己的行，前面有文字在上一行，以及在下一行之后的文本，如here。

Answer 8

也许：

<style>

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

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

8 个答案:

有问题的图像高度

Container DIV