How can I keep text from "touching" a photo?

• 

  cordeliahare · Member · Mar 23, 2013 at 10:12 pm

  • Copy link
  • Add topic to favorites

  When I insert a photo into a page, I want space around it so that accompanying text does not bump right up against the photo. For example, I have a photo placed in the top left hand corner of the page. I want to add text that will continue down the length of the photo and then “wrap around” it once the bottom of the photo is reached. Whenever I try to type in text, however, it nudges right next to the border of the photo (doesn’t look good). Thank you.

• 

  kathrynwp · Staff · Mar 25, 2013 at 3:05 pm

  • Copy link

  Hi there, there are a few different ways to add space around your images.

  After you’ve inserted your image into the post, select the image, and then click the Edit Image icon:

  http://cl.ly/image/1p1E3v1l1C0X

  Next, click the Advanced Settings tab as you see here:

  http://cl.ly/image/0Q1e36470615

  Method 1

  You can add a number (in pixels) in the Vertical space and/or Horizontal space fields, as you can see in blue in the screenshot above. For example, if you put 10 into the Vertical space field, it would add 10 pixels both above and below the image. If you put 10 into the Horizontal space field, it would add 10 pixels both to the left and right of the image. Click the Update button when you’re done.

  Method 2

  To have more precise control over where space is added around the image, you can add CSS code into the Styles field, under Advanced Image Settings. For example:

  http://cl.ly/image/3z022X3t2B3K

  The example code in green would add 10 pixels to the right and bottom of the image, with 0 pixels of space at the top and left. CSS rules are written in clockwise order (top, right, bottom, left).

  Click the Update button when you’re done.

  Method 3

  Since you have the Custom Design upgrade, a third way to add space around your images would be by defining a class in your Custom CSS under Appearance, Custom Design, and clicking the CSS tab.

  For example, you could define a class that has 10 pixels to the right and bottom of an image, like this:

  .leftspace {
margin: 0 10px 10px 0;
}

  You would then add this class (without the dot) to the CSS Class field, next to the existing classes, like this, for example:

  http://cl.ly/image/3q2I1Q3i3305

  Click the Update button when you’re done.

  If you need further help, just let me know.