Extra white space between images?

Question

So I've got a row of images on a site I'm building and there is some un-coded white-space b/w the images.

The margin is set to zero and the debugger doesn't show any padding or border on them either. I have no idea why that white-space is there.

Here's the HTML

<figure class="carousel-inner">
  <img class="sliding-image" src="images/team/alex_morrales.jpg" alt="">
  <img class="sliding-image" src="images/team/david_kim.jpg" alt="">
  <img class="sliding-image" src="images/team/jenny_tabers.jpg" alt="">
  <img class="sliding-image" src="images/team/joey_barrett.jpg" alt="">
  <img class="sliding-image" src="images/team/melinda_lee.jpg" alt="">
  <img class="sliding-image" src="images/team/rachel_dotson.jpg" alt="">
</figure>

And CSS

.carousel-inner {
    width: 1200px;
    height: 200px;
    margin: 0;
}

.sliding-image {
    width: 200px;
    height: 200px;
}

And related CSS reset code

body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,
li, dl, dt, dd, form, a, fieldset, input, th, td
{
  margin: 0; 
  padding: 0; 
  border: 0; 
  outline: none;
}

I'm in Google Chrome by the way.

Here's a screenshot of it

Any help in understanding this conundrum is greatly appreciated, thank you!

score 2 · Accepted Answer · answered Jun 22 '16 at 05:01

That's just how inline/inline-block elements are presented. There are a few ways to get rid of those spaces.

Place all the img tags in one line (do not hit the return key). This is kind of messy to read though:

figure img {
  vertical-align: top;
}

<figure>
  <img src="https://placehold.it/200x200" alt=""><img src="https://placehold.it/200x200" alt=""><img src="https://placehold.it/200x200" alt=""><img src="https://placehold.it/200x200" alt=""><img src="https://placehold.it/200x200" alt=""><img src="https://placehold.it/200x200" alt=""><img src="https://placehold.it/200x200" alt=""><img src="https://placehold.it/200x200" alt=""><img src="https://placehold.it/200x200" alt=""><img src="https://placehold.it/200x200" alt="">
</figure>

Another is to set the font-size of the parent to 0:

figure {
  font-size: 0;
}

<figure>
  <img src="https://placehold.it/200x200" alt="">
  <img src="https://placehold.it/200x200" alt="">
  <img src="https://placehold.it/200x200" alt="">
  <img src="https://placehold.it/200x200" alt="">
  <img src="https://placehold.it/200x200" alt="">
  <img src="https://placehold.it/200x200" alt="">
  <img src="https://placehold.it/200x200" alt="">
  <img src="https://placehold.it/200x200" alt="">
  <img src="https://placehold.it/200x200" alt="">
  <img src="https://placehold.it/200x200" alt="">
</figure>

Remember to reset the font-size of the children if you have text there.

You can also use float like so:

figure {
  overflow: hidden;
}

figure img {
  float: left;
}

<figure>
  <img src="https://placehold.it/200x200" alt="">
  <img src="https://placehold.it/200x200" alt="">
  <img src="https://placehold.it/200x200" alt="">
  <img src="https://placehold.it/200x200" alt="">
  <img src="https://placehold.it/200x200" alt="">
  <img src="https://placehold.it/200x200" alt="">
  <img src="https://placehold.it/200x200" alt="">
  <img src="https://placehold.it/200x200" alt="">
  <img src="https://placehold.it/200x200" alt="">
  <img src="https://placehold.it/200x200" alt="">
</figure>

Add HTML comments with the opening right next to the end of the tag and its closing at the next line:

figure img {
  vertical-align: top;
}

<figure>
  <img src="https://placehold.it/200x200" alt=""><!-- not
  --><img src="https://placehold.it/200x200" alt=""><!-- really
  --><img src="https://placehold.it/200x200" alt=""><!-- a
  --><img src="https://placehold.it/200x200" alt=""><!-- fan
  --><img src="https://placehold.it/200x200" alt=""><!-- of
  --><img src="https://placehold.it/200x200" alt=""><!-- this
  --><img src="https://placehold.it/200x200" alt=""><!-- inline
  --><img src="https://placehold.it/200x200" alt=""><!-- element
  --><img src="https://placehold.it/200x200" alt=""><!-- fix
  --><img src="https://placehold.it/200x200" alt="">
</figure>

Put the closing tag at the next line:

figure img {
  vertical-align: top;
}

<figure>
  <img src="http://placehold.it/200x200" alt=""
  ><img src="http://placehold.it/200x200" alt=""
  ><img src="http://placehold.it/200x200" alt=""
  ><img src="http://placehold.it/200x200" alt=""
  ><img src="http://placehold.it/200x200" alt=""
  ><img src="http://placehold.it/200x200" alt=""
  ><img src="http://placehold.it/200x200" alt=""
  ><img src="http://placehold.it/200x200" alt=""
  ><img src="http://placehold.it/200x200" alt=""
  ><img src="http://placehold.it/200x200" alt="">      
</figure>

Those are the fixes/hacks I know. Not really sure if there are any other ways. :)

Alright, thanks. I actually found an article on css tricks that explains all these methods also. Thanks. — Edson, Jun 22 '16 at 05:05

rckjncwlng · Answer 2 · 2016-06-22T04:46:06.613

1

The image has a default 4px margin-right

Apply this to your css code to fix it.

CSS

.carousel-inner {
    width: 1200px;
    height: 200px;
    margin: 0;
}

.sliding-image {
    width: 200px;
    height: 200px;
    display: inline-block; //added
    margin-right: -4px; //added
}

Other way is using float:left to the .sliding-image

.carousel-inner {
    width: 1200px;
    height: 200px;
    margin: 0;
}

.sliding-image {
    width: 200px;
    height: 200px;
    float: left;
}

edited Jun 22 '16 at 04:46

answered Jun 22 '16 at 04:28

rckjncwlng

33
5

2

This `margin-right: -4px;` is just a vulgar hack, sorry. Try to set `font-size:48px` on the `
` or its parent.
– c-smile Jun 22 '16 at 04:32
Yeah, I know about setting a negative margin but I'm looking for a legit way to fix this. – Edson Jun 22 '16 at 04:42
i just updated my answer. i think that would do the output you want – rckjncwlng Jun 22 '16 at 04:47
Alright, thanks rckjncwlng, but setting the font size to 0 as SGS Venkatesh suggested worked. But is that solution just another hack? – Edson Jun 22 '16 at 04:52
Nvm, it's a legit fix to the problem. – Edson Jun 22 '16 at 05:06

score 1 · Answer 3 · answered Jun 22 '16 at 04:31

1

Set font-size: 0 in your .carousel-inner style.

.carousel-inner {
    width: 1200px;
    height: 200px;
    margin: 0;
    font-size: 0;
}

answered Jun 22 '16 at 04:31

kvn

2,210
5
20
47

Alright, this worked, but why? – Edson Jun 22 '16 at 04:44
The extra space is because of the spaces/tabs between the elements. When you set `font-size: 0`, the spaces between these elements is taken care of. [Check this](https://css-tricks.com/fighting-the-space-between-inline-block-elements/) article for more information. – kvn Jun 22 '16 at 06:44
I actually found that article after asking this, but thanks for taking the time to answer. Cheers! – Edson Jun 23 '16 at 13:22
Good that you found the answer! – kvn Jun 24 '16 at 04:21

score 1 · Answer 4 · answered Jun 22 '16 at 04:33

It's because of the default white space between inline-block elements, try to add comment tag between each img (inline-block element).

* {
  margin:0;
  padding: 0;
}

.carousel-inner {
  width: 1200px;
  height: 200px;
  margin: 0;
}

.sliding-image {
  width: 200px;
  height: 200px;
}

<figure class="carousel-inner">
  <img class="sliding-image" src="http://placehold.it/350x150"><!--
--><img class="sliding-image" src="http://placehold.it/350x150"><!--
--><img class="sliding-image" src="http://placehold.it/350x150"><!--
--><img class="sliding-image" src="http://placehold.it/350x150"><!--
--><img class="sliding-image" src="http://placehold.it/350x150"><!--
--><img class="sliding-image" src="http://placehold.it/350x150">
</figure>

Good to know, I didn't know that the img element had a default style of "inline-block". Thanks! — Edson, Jun 22 '16 at 04:50

score 1 · Answer 5 · answered Jun 22 '16 at 04:40

So you can try this code, with no breakline between <img> tag

<figure class="carousel-inner"><img class="sliding-image" src="http://placehold.it/350x150"><img class="sliding-image" src="http://placehold.it/350x150"><img class="sliding-image" src="http://placehold.it/350x150"><img class="sliding-image" src="http://placehold.it/350x150"><img class="sliding-image" src="http://placehold.it/350x150"><img class="sliding-image" src="http://placehold.it/350x150"></figure>

And same as this, with html comment tag

<figure class="carousel-inner">
   <img class="sliding-image" src="http://placehold.it/350x150"><!--
   --><img class="sliding-image" src="http://placehold.it/350x150"><!--
   --><img class="sliding-image" src="http://placehold.it/350x150"><!--
   --><img class="sliding-image" src="http://placehold.it/350x150"><!--
   --><img class="sliding-image" src="http://placehold.it/350x150"><!--
   --><img class="sliding-image" src="http://placehold.it/350x150">
</figure>

Extra white space between images?

5 Answers5