Support » Fixing WordPress » Images with captions and margin

  • Using the 2010 theme.
    Using the Visual editor.
    Insert an image, right aligned with a caption. Looks good.
    As soon as I add a left margin of, say, 30px to create more space between the image and the text, image is shift right by 30px. The caption is on a grey background and looks to be in the correct location, but no margin is applied between it and the text.

    Hope I’ve described this well enough for someone to understand the problem I’m having.

    Can someone give me some advice about to handle this. I’m happy to add some css if that’s the solution.

Viewing 15 replies - 1 through 15 (of 19 total)
  • Moderator kmessinger


    Are you using “padding”?

    I am using whatever is standard for the 2010 theme. I have made no CSS edits and only apply margins by using the edit panel by clicking on an image.

    Moderator kmessinger


    Ok, so you are in the dashboard. You pick a post to edit. You click on the image and then the “tree” icon and a pop-up comes up where you can change things. Is this what you are doing?

    I’m actually putting the image on a page.
    I have inserted it.
    I click it and in the top left hand corner you get two icons. One to delete the other to edit properties. I go to the Advanced tab and enter the margin parameters here.

    Moderator kmessinger


    How are you entering margin parameters? There is only vertical and horizontal space.

    BTW, the text will look close in the visual editor but be fine in the post itself. More space between the caption and image can be done in CSS.

    There’s a section for entering Styles. If you actually specify a horizontal value the Styles section is populated. You can then edit this.

    Does this help you determine what I need to do?

    Moderator kmessinger


    You can use margin, margin-top, etc. Padding, padding-top, etc. to get what you want. Like padding-bottom: 10px; margin-bottom: 30px;

    Also keep in mind the are really two boxes there with handles so you can drag one to make the image larger and the other to center the caption.

    You can also add space between the caption and image by going to the html mode and entering a non-breaking space just before the closing tag, /image> but I don’t think this is a good way.

    Appreciate you trying to help. Not sure I’ve successfully transmitted what I’m struggling with. Here’s a screenshot that shows the image offset to the right and I don’t want it to be. This only happens when I add a caption. Without the caption everything is positioned where I would expect it to be.

    When you add padding or margin to the style in the advanced image editing area it is only applied to the image itself, not to the class that contains the caption and image.

    I would suggest editing the themes css file to add the margin or padding there (for images with captions, the style is usually .wp-caption-text, use firebug to see exactly what it is)

    If you do not have access, or are not confident in editing the css file, switch over to the HTML view in the editor, locate your image and add style="margin-left:40px;border:2px solid black;" in the image ref

    Thanks, Troy. That helps a lot.

    Basically, this means that unless one is willing to edit the css (or add a style) the caption feature is useless, if you are trying to add a margin between an image and text.

    It seems to me the image may have been inserted inline with existing text and is anchored there with a span or other element….try adding the image first then adding text that does not include any encoded elements (paste plain text).

    So I just tried adding a new image to new page. NO TEXT.
    I add the image from the media library.
    I get the same problem.

    Moderator kmessinger


    Thanks for the screen shot. I am not sure how you got the background/caption in that position. Probably with the advanced setting.

    Using 2010 and the visual editor I brought in an image with the a caption. I can click on the image and the little edit image and delete buttons show but also is a set of handles where I can size the image. Resizing, the background stays in the correct position relative to the image but the caption moves.

    If I click in the caption area, a different set of handles appear and using them I can adjust the size of gray area. The image stays the same size except when I make the gray area too small and then the image is resized also. I can place a cusor on the caption and move it with the space bar or change what it says.

    Whatever I do, moving the background or resizing the picture, the picture stays in the horizontal center.

    @kmessinger: Are you using the 201 theme?

    Moderator kmessinger


    I have checked this in the 2010 theme and the Weaver II Pro theme, both running wp3.3.1. I also checked the Atahualpa 3.6.7 theme using wp3.4-alpha-19672. Everything works correctly.

Viewing 15 replies - 1 through 15 (of 19 total)
  • The topic ‘Images with captions and margin’ is closed to new replies.