Margin/Padding Between Images Not Working

Take a look at The two images on the right hand side of the screen are touching, and I want there to be a space between them so that the bottom of the second one will line up with the circles underneath the module to the left.

I try adding a margin or padding to the bottom of the img,and it appears to work as when I highlight the image with firebug, it highlights space below the image, but it doesn’t add a space below which separates the two images. However, when I add a margin to the top of the image, then both images have a margin but this is not what I want because then the top image doesn’t line up with the module on the left. Any ideas? Thanks.

Couldn’t you just give the bottom image a top margin to push it down a bit?

You say you’ve tried it, but try only applying htat margin to one of the images.

Aka give one image an id of…heck, #rocketimage, and then in the CSS, give that a margin.


Your top image is inside an absolutely placed container and therefore a margin on the absolutely placed element will have no effect on other elements.

The bottom element moves when you give a top margin because both elements are getting a top margin but the top image has no impact on the one below. It’s just the top margin on the second element that makes it move. The fact that the top one moves as well has nothing to do with the flow of the page.

You would need to apply a bottom margin to the parent container of that absolute image.


.slideshow {margin-bottom:20px}

It looks like you fixed the problem by using a bigger image :slight_smile: