CODEWITHSUNDEEP
htmlcssresponsive-design
Elaine Marley
Elaine Marley

Reputation: 2213

Responsive images - Extra padding?

I'm programming a website using Foundation theme for wordpress that is setup for responsive designs and I have a problem with images.

I get an extra bottom padding that I simply cannot see on firebug. This is a mockuo of what I have, and the problem shows up on jsFiddle so I'm guessing it has nothing to do with the template.

<div class="container">
    <img src="http://www.lamasia.es/web/new/wp-content/uploads/imagen3.png" alt=""/>
</div>

img{
  height:auto;
  max-width:100%
}

.container{
  background-color:#ccc;
  padding:2%;
  width:40%;
}

http://jsfiddle.net/dbCsY/

I read some answers on this and some said use padding as a percentage, which I did and didn't solve the issue. Why is this happening and how can I fix it?

Upvotes: 2

Views: 488

Answers (3)

Vivek Chandra
Vivek Chandra

Reputation: 4358

display:block should be your fix.. http://jsfiddle.net/dbCsY/1/

Upvotes: 1

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

The issue is related to the default vertical-alignment of this inline placed element. You can understand the behaviour looking at this MDN documentation page:

so or you change the display property of the element, or you better change the vertical-align property (IMHO it's better because you don't change the display)

Upvotes: 4

Undefined
Undefined

Reputation: 11431

Setting display:block style on the image sorts it for me :)

e.g http://jsfiddle.net/dbCsY/

Upvotes: 1

Related Questions