Don't indent in p tag when there is a img tag in it

Question

Here is my html architecture:(I can not change the architecture because it is generated by Markdown.

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

I have set text-indent in my css file:

p {
    text-indent: 2em;
}

Problem is when my image is very large, some part of my image may be in the outside of my container. I hava set max-width: 100% for img tag.

You can see that a little part of the arrow is in the outside of the container.

Answer 1

you could just offset the indentation on the image by doing something like:

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

Does that solve your issue or is there something I'm missing?

http://jsfiddle.net/YvMCV/

Answer 2

When you set img width to 100%, it does just that, regardless of text-indent or padding. The amount that the image has overflown is 2em, the width of your text-indent. You could use % instead of em to set text-indent and have your img width be what's left over...

p {
    text-indent: 1%;
}

p img {
    width: 99%;
}

OR, do as the other answer mentions and set img to margin-left: -2em;.