How to use CSS to give every image on the page the same padding

[raferguson]

I want to give every image on a page (think a gallery of photos) the same padding (space) on all four sides. I want to be able to tweak the padding on all of them without editing twenty image lines. I have spent two hours failing to answer this very simple question, looking at 50 web pages, and my html5 book. I tried to do this with style on the .html page, and with the .css page, but no luck. Ideally, I would be able to do this at the .css level, so that it applies to multiple .html pages.

I used to know HTML, but I am trying to figure out HTML5.

My best guess in that there is some fundamental misunderstanding that I have about div and class, because I was trying to do this through div and class. It could be some syntax that I am missing, a missing period or something.

Thanks

[Senff]

If you want to give padding to images on just that one page, including this simple CSS (on just that page!) should work:

img {
   padding: 20px;
}

However, maybe something else is overriding it…maybe the images are wrapped in divs or other elements, or a plugin is resetting it, etc. Hard to tell without seeing your site.

[raferguson]

That worked, many thanks. I did have to strip out the div that I kept trying to make do the same thing, so your hint on what else could be a problem was sound as well. Could I have done the same thing on the .css page? I will probably try, just for the educational purpose.

My site is so simple that I may not need much fancy stuff. The most complex thing is a slideshow with links, but there are plenty of websites offering code. I may come back with some more questions as I go forward.

[Author]

Posts