Images with captions and margin

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.

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.

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?

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.

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?

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.