text-indent deformating img in html

Question

I have a rule to my blog posts that is:

p + p {
text-indent: 1.5em;
}

defined in a div:

.entry-content{
    padding: 2em 3em 4em;
}

and I have some pictures inside the <p> defined like this:

p > img {
    margin-bottom: 0.5em; 
    max-width: 96%; 
    height: auto;
    text-indent: 0em;
} 

what is happening is that: first the resize of the image happens before it have the indent applied, so the right margin of the picture goes out of the defined padding (3em) the size of the indent (1.5em), shouldn't the image be resized after the indent?

and then even with the text-indent: 0em; the image still follows the rule from the p+p and have indentation.

I solved the problem putting the max-width at 96% instead of 100%, but isn't there a more logical way of solving this?

thanks

Answer 1

The max-width of the image is determined by the width of the p that contains the image. text-indent does not change the width of the p, but it will shift the text/image in, which will cause the image to overhang. Bottom line, you're seeing the correct behavior.

You need to modify your html/css to achieve the desired results. Without a more complete example, I can't offer alternative approaches. You could try position: absolute on the image which will cause the image to go to the upper left corner (ignoring text-indent and padding). If you try this, don't forget to set position: relative on the containing p.

p + p {
    text-indent: 1.5em;
    position: relative;
}

p > img {
    margin-bottom: 0.5em; 
    max-width: 96%; 
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
}