当有一个img标签时，不要在p标签中缩进

Question

这是我的html架构:(我无法更改架构，因为它是由Markdown生成的。

<p><img src="foo.png" /></p>

我在我的css文件中设置了text-indent：

p {
    text-indent: 2em;
}

问题是当我的图像非常大时，我的图像的某些部分可能位于我的容器外部。 我为img标签设置了max-width: 100%。

您可以看到箭头的一小部分位于容器外部。

Answer 1

您可以通过执行以下操作来抵消图像上的缩进：

p > img {
    margin-left:-2em;
}

这是否解决了您的问题，或者是否有我遗漏的东西？

http://jsfiddle.net/YvMCV/

Answer 2

当您将img width设置为100％时，无论text-indent还是padding都是如此。图片溢出的金额为2em，即text-indent的宽度。您可以使用％而不是em来设置text-indent并让您的img宽度为剩余的...

p {
    text-indent: 1%;
}

p img {
    width: 99%;
}

或者，按照其他答案提及并将img设置为margin-left: -2em;。