How do I make an image have padding while keeping the webkit-box-shadow?
Question by cjmabry
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 –
http://imgur.com/kKY0A (I can’t post pictures yet)
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 by Starx
Give the background of the same color
#content img {
-moz-box-shadow: 0 0 5px 2px #282a2d;
-webkit-box-shadow: 0 0 5px 2px #282a2d;
background: #282a2d;
padding:10px;
}
UPDATE:
As mentioned in comment, OP seems to be OK without padding too. So, I will just complete my answer.
#content img {
-moz-box-shadow: 0 0 5px 2px #282a2d;
-webkit-box-shadow: 0 0 5px 2px #282a2d;
margin:10px
}
