图像之间有多余的空白？

Question

所以我在我建造的网站上有一排图像，并且图像中有一些未编码的白色空间。

边距设置为零，调试器也不会显示任何填充或边框。我不知道为什么那个白色空间在那里。

这是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>

和CSS

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

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

相关的CSS重置代码

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;
}

顺便说一下，我在谷歌浏览器中。

这是

的截图

非常感谢您对理解这个难题的任何帮助，谢谢！

Answer 1

图片默认为4px margin-right

将此应用于您的css代码以修复它。

<强> CSS

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

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

其他方式是将float:left用于.sliding-image

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

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

Answer 2

以font-size: 0样式设置.carousel-inner。

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

Answer 3

由于inline-block元素之间的默认空格，尝试在每个img（inline-block元素）之间添加注释标记。

* {
  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>

Answer 4

因此，您可以尝试使用此代码，<img>代码

之间没有分隔线

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

与此相同，使用html评论标记

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

Answer 5

这就是如何呈现内联/内联块元素。有几种方法可以摆脱这些空间。

1. 将所有img标记放在一行中（不要点击返回键）。尽管如此，这有点麻烦：
＆＃13;
＆＃13;
figure img {
  vertical-align: top;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;
1. 另一种方法是将父级的font-size设置为0：
＆＃13;
＆＃13;
figure {
  font-size: 0;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

如果您有孩子的话，请务必重置孩子的font-size。

1. 你也可以这样使用float：
＆＃13;
＆＃13;
figure {
  overflow: hidden;
}

figure img {
  float: left;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;
1. 在标记末尾旁边的开头添加HTML comments，然后在下一行关闭：
＆＃13;
＆＃13;
figure img {
  vertical-align: top;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;
1. 将结束标记放在下一行：
＆＃13;
＆＃13;
figure img {
  vertical-align: top;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

这些是我所知道的修复/黑客攻击。不确定是否还有其他方法。 ：）