Padding not showing when wrapping text around image

  • judahraine

    (@judahraine)


    15 years, 1 month ago

    Hey there – me again!!

    I’ve had to change the theme for http://www.judahraine.com/romancewriteup as the previous one wasn’t “plugin-friendly”. Image alignment is working wonderfully, thanks to previous assistance. However, the padding is not showing with the wrapped text, i.e. text is flush against image which looks gross.

    I have altered the css as follows:

    a img
    {
    .alignright { float: right; padding: 15px; border: 0; }
    .alignleft { float: left; padding: 15px; border: 0; }
    img {border:1}
    img {border:solid #580A2D 1px}
    p img { padding: 15; max-width: 100%; }
    img.right { padding: 15px; margin: 0 0 2px 7px; display: inline; }
    img.left { padding: 15px; margin: 0 7px 2px 0; display: inline; }
    img.centered { display: block; margin-left: auto; margin-right: auto; }
    }

    but it still doesn’t affect the text padding.

    I would really appreciate a little help here!
    Many thanks,
    Jude

Viewing 2 replies - 1 through 2 (of 2 total)
  • t31os

    (@t31os)

    15 years, 1 month ago

    You can’t nest CSS inside CSS like that, or at least not to my understanding…

    Put a img {} on it’s own line like the others for starters…

    You only to give whichever class/id applies to the image a margin…

    http://www.w3schools.com/Css/

    vikingjs

    (@vikingjs)

    15 years, 1 month ago

    I am also suspicious of the nested CSS stuff; it seems like a logical shorthand but by my reading it isn’t mentioned in the CSS 2.0 specification. You may have trouble on some browsers with that.

    However, I think the problem you are encountering is caused by the way collapsing padding interacts with float. (That’s how I’ve explained it to myself in the past, at least.) Try using margins to create the space and I think you’ll be all right.

    You can test it pretty easily just by switching “padding” to “margin” on your .alignleft line. (I dont think the following rules will override it, anyway, it’s a bit heard to tell.) If that works you’ll need to do some tweaking but you’ll be on your way.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Padding not showing when wrapping text around image’ is closed to new replies.