title: Extra white space between images?
body: <p>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. </p>
  
  <p>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. </p>
  
  <p>Here's the HTML </p>
  
  <pre><code>&lt;figure class="carousel-inner"&gt;
    &lt;img class="sliding-image" src="images/team/alex_morrales.jpg" alt=""&gt;
    &lt;img class="sliding-image" src="images/team/david_kim.jpg" alt=""&gt;
    &lt;img class="sliding-image" src="images/team/jenny_tabers.jpg" alt=""&gt;
    &lt;img class="sliding-image" src="images/team/joey_barrett.jpg" alt=""&gt;
    &lt;img class="sliding-image" src="images/team/melinda_lee.jpg" alt=""&gt;
    &lt;img class="sliding-image" src="images/team/rachel_dotson.jpg" alt=""&gt;
  &lt;/figure&gt;
  </code></pre>
  
  <p>And CSS</p>
  
  <pre><code>.carousel-inner {
      width: 1200px;
      height: 200px;
      margin: 0;
  }
  
  .sliding-image {
      width: 200px;
      height: 200px;
  }
  </code></pre>
  
  <p>And related CSS reset code</p>
  
  <pre><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;
  }
  </code></pre>
  
  <p>I'm in Google Chrome by the way.</p>
  
  <p>Here's a screenshot of it</p>
  
  <p><a href="https://i.stack.imgur.com/v8ZnX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/v8ZnX.png" alt="enter image description here"></a></p>
  
  <p>Any help in understanding this conundrum is greatly appreciated, thank you!</p>