Edson Edson - 5 months ago 8
CSS Question

Extra white space between images?

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

enter image description here

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

Answer

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

  1. 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>

  1. 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.

  1. 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>

  1. 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>

  1. 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. :)

Comments