Why is there a gap between images?

Question

This is a very simple example. It displays a gap between all 4 images. Doesn't matter if they are in the same div or not.

<div>
  <img src="http://lorempixel.com/400/200">
  <img src="http://lorempixel.com/400/200">
</div>
<div>
  <img src="http://lorempixel.com/400/200">
  <img src="http://lorempixel.com/400/200">
</div>

div {
  margin: 0;
  padding: 0;
}
img {
  margin: 0;
  padding: 0;
}

<div>
  <img src="http://lorempixel.com/400/200">
  <img src="http://lorempixel.com/400/200">
</div>
<div>
  <img src="http://lorempixel.com/400/200">
  <img src="http://lorempixel.com/400/200">
</div>

Codepen

Where are these gaps coming from and how do I get rid of them?

I have tested in Chrome, Opera, Firefox and Safari.

@MohammadUsman this it may be a duplicate, but here are other answers that fit better the question. — Edwin, Dec 19 '17 at 09:01
If you were helped by any answer please mark that as the answer so others can follow. — Jithin Raj P R, Dec 21 '17 at 06:02

Sebastian Brosch · Answer 1 · 2017-12-19T09:18:24.537

The reason is the inline-elements (<img>). You can do multiple things. One would be to set font-size on the image container to 0.

div.img {
  clear:both;
  font-size:0;
}
div.img img {
  display:inline;
  float:left;
}

<div class="img">
  <img src="https://lorempixel.com/400/200">
  <img src="https://lorempixel.com/400/200">
</div>
<div class="img">
  <img src="https://lorempixel.com/400/200">
  <img src="https://lorempixel.com/400/200">
</div>

Another solution using flexbox (more recommended):

div.img {
  display:flex;
  flex-direction:row;
  align-items:start;
}

<div class="img">
  <img src="https://lorempixel.com/400/200">
  <img src="https://lorempixel.com/400/200">
</div>
<div class="img">
  <img src="https://lorempixel.com/400/200">
  <img src="https://lorempixel.com/400/200">
</div>

And one more solution with CSS grid:

div.img {
  display:grid;
  grid-template-columns:auto auto;
}

<div class="img">
  <img src="https://lorempixel.com/400/200">
  <img src="https://lorempixel.com/400/200">
</div>
<div class="img">
  <img src="https://lorempixel.com/400/200">
  <img src="https://lorempixel.com/400/200">
</div>

score 2 · Answer 2 · edited Dec 19 '17 at 09:26

2

Simply use display: flex for this to the parent div like below

div {
  display: flex;
}

<div>
  <img src="http://lorempixel.com/400/200">
  <img src="http://lorempixel.com/400/200">
</div>
<div>
  <img src="http://lorempixel.com/400/200">
  <img src="http://lorempixel.com/400/200">
</div>

edited Dec 19 '17 at 09:26

VXp

11,598
6
31
46

answered Dec 19 '17 at 08:58

Bhuwan

16,525
5
34
57

Jithin Raj P R · Answer 3 · 2017-12-19T09:36:32.017

Updated

Just put float: left to the <img> and the problem is solved

The img is a block element that's why the gap between them if use float to the img then it will solve your issue.

To break the images as per the image just add clear: both; to the

div {
  margin: 0;
  padding: 0;
  clear: both;
}
img {
  margin: 0;
  padding: 0;
  float:left;
}

<div>
  <img src="http://lorempixel.com/400/200">
  <img src="http://lorempixel.com/400/200">
</div>
<div>
  <img src="http://lorempixel.com/400/200">
  <img src="http://lorempixel.com/400/200">
</div>

Codepen

Hope this is helpful.

score 0 · Answer 4 · edited Dec 19 '17 at 09:19

0

make use of "style=float:left" and style="line-height:0px;" will resolve issue . try below it resolve issue of bottom an side space too

<div style="line-height:0px;">
  <img src="http://lorempixel.com/400/200" style="float:left;">
  <img src="http://lorempixel.com/400/200">
</div>
<div >
  <img src="http://lorempixel.com/400/200" style="float:left;">
  <img src="http://lorempixel.com/400/200">
</div>

edited Dec 19 '17 at 09:19

VXp

11,598
6
31
46

answered Dec 19 '17 at 08:54

Pranay Rana

175,020
35
237
263

this will solve just the horizontal gap – Edwin Dec 19 '17 at 08:56
@Edwin - try now problem resolved for both – Pranay Rana Dec 19 '17 at 09:00
@VXp - slashes , not getting you ... – Pranay Rana Dec 19 '17 at 09:01
Ending / closing shasles ( / ). No element needs them. – VXp Dec 19 '17 at 09:03
@VXp - closing of element needed ...every element has closing tage and some them close with in the declaration only ...but closing is needed thing – Pranay Rana Dec 19 '17 at 09:06
It's not necessary with the HTML5, and also with others before, but not all. – VXp Dec 19 '17 at 09:07

Why is there a gap between images?

4 Answers4