parent div with img child with width: 100%, height: auto, always leaves 2px height gap

Question

I'm trying to have a stack of divs with fullscreen image as its child, but the parent div height doesn't match the img height.

The CSS is not too complicated

  .content {
    overflow: hidden;
    position: relative;

    min-width: 1024px

  }

  .content img {
    width: 100%;
    height: auto;
  }

Here's the JSBin http://jsbin.com/baqexonu/1/ , you'll notice a 2px gap between the divs

please help.

@badcoder It's better to use `vertical-align: bottom;` for the images as: `.content img { vertical-align: bottom; }`. [reference](http://stackoverflow.com/questions/18428997/center-image-element-in-parent-div/18429014#18429014). — Hashem Qolami, Mar 04 '14 at 09:50

score 4 · Accepted Answer · answered Mar 04 '14 at 07:46

4

It's the white-space. Add line-height: 0 to .content.

answered Mar 04 '14 at 07:46

Jack

score 2 · Answer 2 · answered Mar 04 '14 at 07:49

2

You can also add display: block to .content img.

answered Mar 04 '14 at 07:49

Mathias

Thank you. This explains where the space is coming from, ie inline(-block) elements flowing and leaving space between lines. Adding line-height: 0 was voodoo for me personally. – user2357 Feb 23 '19 at 16:45

2 Answers2