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

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 setmax-width: 100%for img tag.

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


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

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/

When you set img width to 100%, it does just that, regardless oftext-indentorpadding. The amount that the image has overflown is2em, the width of yourtext-indent. You could use % instead of em to settext-indentand 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 tomargin-left: -2em;.

Tags: css, text-indent
What Others Are Reading