White space when using img in a div

Question

My current css is

.container {
display: block;
width: 400px;
height: auto;
padding: 0px 0px;
background-color: #ffffff;
border: black 1px solid;
}
.container img {
width: 100%;
}

And html is

<div class="container">
<img src="http://67.media.tumblr.com/15b26a66682a68facad249bd442ced38/tumblr_nw48hrdLfp1sikueao2_1280.jpg">
</div>

Here is the result, how do i get rid of the white space below the image?

Also using this `` you are creating two `` tag. Maybe it is a typo :) — William Martins, Jul 03 '16 at 14:50

score 2 · Accepted Answer · answered Jul 03 '16 at 14:51

2

hello apply display block to image

div img {
  display: block;
}

answered Jul 03 '16 at 14:51

Esmeraldi Bejolli

111
7

score 1 · Answer 2 · answered Jul 03 '16 at 14:51

Default display for img elements is inline and that white space below image is space for descenders on letters like j, y, g... You can fix that by adding vertical-align: top

.container {
  display: block;
  width: 400px;
  height: auto;
  padding: 0px 0px;
  background-color: #ffffff;
  border: black 1px solid;
}
.container img {
  width: 100%;
  vertical-align: top;
}

<div class="container">
  <img src="http://placehold.it/350x150">
</div>

White space when using img in a div

2 Answers2