CODEWITHSUNDEEP
javascriptjqueryhtml
macwadu
macwadu

Reputation: 907

space between the border and the image

I was trying to put a border fitting a image but with some little space between the border and the image.

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

Can anyone help me?

Tanks

Upvotes: 0

Views: 110

Answers (4)

gion_13
gion_13

Reputation: 41533

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.

Upvotes: 1

Jon Nylander
Jon Nylander

Reputation: 8963

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/

Upvotes: 2

Manuel van Rijn
Manuel van Rijn

Reputation: 10315

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

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

Upvotes: 2

mplungjan
mplungjan

Reputation: 178413

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);
});

Upvotes: 1

Related Questions