9 {{ upvoteCount | shortNum }}
9 {{ upvoteCount | shortNum }}

Need Help with Image Spacing

by CatherineMay
8 replies
  • WEB DESIGN
    • |
Hi, I'm having a problem with an image on a wordpress site. I have it aligned to the left, with no border, and the text is wrapped around it. Problem is I want a little more space between the image and the text.

I've tried using the advanced settings to add a extra pixels to the horizontal space, but when I do that it automatically adds space to the vertical space, also. Is this normal?

Anyway, no matter what I do with the advanced settings, I can't get any extra space where I need it.

What am I doing wrong?
#image #padding #spacing
  • Profile picture of the author Brandon Tanner
    No way to know for sure without seeing the page. What's the URL?
    Signature

    {{ DiscussionBoard.errors[7497996].message }}
  • Profile picture of the author mgreener
    Hi,

    You can use css margin-left and margin-right or padding-left, padding-right.
    Signature
    2 Free Pro List Building Templates - Turbocharge Your Opt Ins
    {{ DiscussionBoard.errors[7498051].message }}
    • Profile picture of the author CatherineMay
      Originally Posted by mgreener View Post

      Hi,

      You can use css margin-left and margin-right or padding-left, padding-right.
      Can you please give the exact code for padding right? If I wanted 20 pixels, do I just put "padding-right: 20" ?
      Signature

      {{ DiscussionBoard.errors[7498234].message }}
      • Profile picture of the author shawnirwin
        This is the right method

        padding-right:20px;
        Signature
        Please stop promoting your website in your posts.
        {{ DiscussionBoard.errors[7499216].message }}
  • Profile picture of the author clickbump
    This should do it:

    Code:
    img.alignleft{
    margin:0;
    padding:0 20px 0 0;
}
    The first line resets the margins to zero. The second line is the shorthand padding setting. Values are read like a clock face. Starting at 12 o'clock then around clockwise to 3, 6, 9 (padding:Top Right Bottom Left)

    So, 20px for right and 0 for top, bottom and left.

    Or, in long form, this will do the same:

    Code:
    img.alignleft{
    margin:0; //zero out margins
    padding:0; //zero out padding
    padding-right:20px; //sets right side padding to 20 pixels
}
    I'm zero'ing the margins and padding to eliminate any conflicts with your existing css rules. You can place this at the bottom of style.css (or at the bottom of the last stylesheet included in your theme)
    Signature
    {{ DiscussionBoard.errors[7498484].message }}
    • Profile picture of the author CatherineMay
      Thanks, Scott, for your lengthy reply, but I only need something for one post. Aren't your instructions for a site-wide fix? And the wordpress coding already indicates that it's aligned left.

      Anyway, I've rearranged some text so it looks better.
      Signature

      {{ DiscussionBoard.errors[7499158].message }}
      • Profile picture of the author clickbump
        Originally Posted by CatherineMay View Post

        Thanks, Scott, for your lengthy reply, but I only need something for one post. Aren't your instructions for a site-wide fix? And the wordpress coding already indicates that it's aligned left.
        If you want to filter the css so that it only applies to a single post, you can certainly do that. You just need to go to the page and check the view source on the "<body..>" tag to see what the postid-xx class is. You can then add that onto the front of the css I sent and it should do the trick.

        Here's what you are looking for (as an example):

        Code:
        <body class="single single-post postid-3089 single-format-standard logged-in">
        So, the css would then be:

        Code:
        .postid-3089 img.alignleft{
    margin:0;
    padding:0 20px 0 0;
}
        Signature
        {{ DiscussionBoard.errors[7499597].message }}
  • Profile picture of the author blogfreakz
    if you want to get a better answer to question, just post the actual url..
    Signature
    Listen to your favorite podcast here
    {{ DiscussionBoard.errors[7502066].message }}

Trending Topics