Padding/Margin for Images within a DIV

Ok. I recently made some updates to this website.

http://annberingerart.com/index.php

Upon making some minor changes it seems that the margin and padding for the images on the index page has changed. I would like for there to be equal padding both vertically and horizontally between all images as well as a consistent margin.

In addition, I was viewing the website on a friend's MAC with Safari 5 installed and the entire wrapper seemed to have shrunk in size because it could not contain its children as it had before I made the changes.

You can take a look at the CSS in firebug as开发者_StackOverflow it would be lengthy and excessive to post 400+ lines of CSS on here.

Any and all criticism is welcome, but I mostly want advice on how to fix this issue.

Your horizontal margin is caused by spaces / new-lines because the images are inline elements (sort of inline-block really...).

If you float the images, you will have more control over the exact margins instead of depending on the width of a space / new-line.

To solve your problem, you could:

• float the images left;
• give the wrapper a left-padding, no right-padding and an overflow:hidden;
• give all images a right padding (the same as the left-padding of the wrapper).