How do I make an image have padding while keeping the webkit-box-shadow?

Question

I want to style all of the images on my website to have box-shadows and padding of 10px, so that text isn't smooshed up against them. However, when I assign any padding to "img" with CSS, the box-shadow is drawn at the edge of the padding, leaving a 10px blank space around the image.

#content img {
    -moz-box-shadow: 0 0 5px 2px #282a2d;
    -webkit-box-shadow: 0 0 5px 2px #282a2d;
    padding:10px
}

This particular image is floated left within the paragraph. here is an example of my problem -

Any ideas?

EDIT: I do not want the padding. I just want the box-shadow, and then space, so that text doesn't mash up right next to the box-shadow. Turns out what I wanted was margin, not padding. Silly mistake.

Answer 1

use margin in addition to padding

#content img {
    box-shadow: 0 0 5px 2px #282a2d;
    padding: 10px;
    margin-right: 10px;  
}