Prevent Images from Inheriting Padding

[siouxfan45]

http://codepen.io/seraphzz/pen/EBKsC

I’m getting into designing blog posts in a better way, as opposed to the old “We’ll put a 300px sidebar on the right and the content on the left.”

I have 85px of padding on each side of my paragraphs #content p { padding:0 85px 1em 85px }

I would like my images, which are inside of the paragraphs (using WordPress) to not be subject to that 85px of padding. That is, I would like them to align to the outside of the #content div if they are aligned to the left or the right.

I achieved this earlier via CSS, accidentally didn’t save it, then forgot what it is I had done!

[CrocoDillon]

img.alignleft {
float:left;
margin: .5em 1.48em .5em -85px
}

works for me :)

[Paulie_D]

Is it possible to restructure the HTML of your “post entries”?

This would seem to be the simplest & most sustainable way.

[Paulie_D]

>as far as I know there’s not a way to do so in WordPress which would be sustainable with core updates.

I don’t know why…isn’t it just a matter of changing the template?

[CrocoDillon]

What’s wrong with negative margin?

[CrocoDillon]

That articles doesn’t say anything negative about negative margins (no pun intended)

Other options either preserve the space of the original position (relative position, transforms) or preserve no space at all (absolute position)

[Paulie_D]

>WordPress automatically inserts images in a particular way and that includes adding the images inside of paragraph tags.

That’s as may be but that’s no reason it has to be inside your **main** text paragraph.

Frankly, if WP is inserting images inside p tags by default that would seem to be a nonsensical option.

I wonder what the rationale is behind that decision.

[Author]

Posts