CODEWITHSUNDEEP
htmlcssimagepadding
Kamyar
Kamyar

Reputation: 18797

img inside div with padding

I'm trying to wrap a div around an image. The image is larger than the div size. by using Overflow: hidden I have hidden the part of image outside the div. Now I want to set padding for my div, so the image doesn't fill all the div area. But it seems like the img ignores the bottom-right padding values.

To be more clear, here's what I have now (http://jsfiddle.net/sAYEq/4/):
enter image description here

And here's what I'm trying to achieve:
enter image description here

Please note that I do not want to set my image's width/height since I want the image to be in its actual size and the parts outside the div should not be displayed.

Upvotes: 3

Views: 6122

Answers (2)

Nick Kugaevsky
Nick Kugaevsky

Reputation: 2945

Something like this

.parent {
  width: 400px; 
  height: 200px;
  outline: 1px solid red;
  overflow: hidden;
  border: 10px solid white;
}

Upvotes: 0

Daedalus
Daedalus

Reputation: 7722

Simply give your wrapper 100% width and height:

#wrapper{
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: inline-block;
    border: 1px solid green;
}

It will work as you want it to.

Upvotes: 3

Related Questions