text-indent deformating img in html
-
06-06-2021 - |
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
Solution
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;
}