Grow your CSS skills. Land your dream job.

Prevent Images from Inheriting Padding

  • # May 29, 2013 at 12:15 pm

    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!

    # May 29, 2013 at 12:21 pm

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

    works for me :)

    # May 29, 2013 at 12:23 pm

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

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

    # May 29, 2013 at 12:44 pm

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

    @CrocoDillon Thanks, I wonder if there is a way to achieve this without negative margins.

    # May 29, 2013 at 12:56 pm

    >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?

    # May 29, 2013 at 1:01 pm

    What’s wrong with negative margin?

    # May 29, 2013 at 1:08 pm

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

    @CrocoDillon Negative margins are a bit of a last resort (and possibly the only option). http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/

    # May 29, 2013 at 1:15 pm

    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)

    # May 29, 2013 at 1:16 pm

    >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.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".