How to remove white space below images?

Question

Take a look at the code. There is white space below div that contains image. How can I remove it? If I delete doctype, white space would be removed. But I need doctype.
Edit: Also I want .container to be "inline-block" and changing It to "block" will just replace the space from below div to the lower part of the .container and won't remove it. Sorry for bad English.

<!doctype html>
<head>
<style>
* {
  margin: 0;
  padding: 0;
}
.container {
  display: inline-block;
  width: 100%;
  background: #000;
  color: #fff;
}
.container img {
  display: block;
}
</style>
</head>
<div class="container">
  <img src="https://openclipart.org/assets/images/images/openclipart-banner.png" />
</div>
<div class="container">
  123
</div>

In the absence of any explanation, there are some nice ones here: [Image inside div has extra space below the image](https://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image). Personally, I can't bring myself to upvote an answer that says "just do this" without explaining the problem and solution. — showdev, May 23 '18 at 19:18
@Adib Remove the container class from your second div and add this style to it: `
123
` here is fiddle: https://jsfiddle.net/dm4vtoy1/ — user2796515, May 23 '18 at 20:33

score 0 · Answer 1 · answered May 23 '18 at 19:13

0

Use block for .container.

<!doctype html>
<head>
<style>
* {
  margin: 0;
  padding: 0;
}
.container {
  display: block;
  background: #000;
  color: #fff;
}
.container img {
  display: block;
}
</style>
</head>
<div class="container">
  <img src="https://openclipart.org/assets/images/images/openclipart-banner.png" />
</div>
<div class="container">
  123
</div>

answered May 23 '18 at 19:13

Praveen Kumar Purushothaman

164,888
24
203
252

Check the edited post. – Adib May 23 '18 at 20:02

score 0 · Answer 2 · answered May 23 '18 at 19:15

0

Just add vertical-align: top to .container class.

answered May 23 '18 at 19:15

Fab

4,526
2
21
45

score 0 · Answer 3 · answered May 23 '18 at 19:15

0

Add block to your container:

.container {
  display: block;
  width: 100%;
  background: #000;
  color: #fff;
}

answered May 23 '18 at 19:15

Claire

3,146
6
22
37

Check the edited post. – Adib May 23 '18 at 20:02

score -1 · Answer 4 · answered May 23 '18 at 19:14

-1

Adding display:block; to the element should solve the issue.

answered May 23 '18 at 19:14

Matt U

46
5

Check the edited post. – Adib May 23 '18 at 20:02

How to remove white space below images?

4 Answers4