css - 当 p 标签中有 img 标签时不要缩进

Question

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

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

我在我的 css 文件中设置了文本缩进：

p {
    text-indent: 2em;
}

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

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

Answer 1

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

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

这能解决您的问题还是我缺少什么？

http://jsfiddle.net/YvMCV/

Answer 2

当您将 img 宽度设置为 100% 时，它会执行此操作，而不管text-indent或padding. 图像溢出的量是2em，你的宽度text-indent。您可以使用 % 而不是 em 来设置text-indent并让您的 img 宽度成为剩下的...

p {
    text-indent: 1%;
}

p img {
    width: 99%;
}

或者，按照其他答案提到的那样做并将 img 设置为margin-left: -2em;.