space between the border and the image

I was trying to put a border fitting a image but with some l开发者_开发问答ittle space between the border and the image.

I'm using this example http://jsfiddle.net/macwadu/sEz3N/2/

Can anyone help me?

Tanks

---

removed margin and added 20px (from your moz-border-radius)

http://jsfiddle.net/sEz3N/3/

---

Remove the inline styling of the image. And do the css like this:

.imagePanel {   

  -moz-border-radius:10px;
  border-radius:10px;
  padding: 1px;  
  border:1px solid grey;
}

.imagePanel img {
  -moz-border-radius:10px;
  border-radius:10px;
}

like this: http://jsfiddle.net/sEz3N/5/

---

demo : http://jsfiddle.net/gion_13/sEz3N/7/
You can actually put the border around the actual image... why make a wrapper that covers the border part? This way you only need to add a bit of padding and you're done.

---

This seems to be good, when I remove the margin from the image

$(document).ready(function() {
    theWidth = $(".imagePanel img").width();
    $(".imagePanel").css('width',theWidth+(theWidth*.01));
    $(".imagePanel").css('padding',theWidth*.01);
});