图像之间有多余的空白？ [复制]

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

这就是内联/内联块元素的呈现方式。有几种方法可以消除这些空间。

1. 将所有img 标签放在一行中（不要按回车键）。读起来有点乱：

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. 另一种是将父级的font-size设置为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>

如果您有文字，请记住重置孩子的font-size。

1. 你也可以像这样使用float：

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>

4. 在标签末尾添加HTML comments，开始在标签末尾，结束在下一行：

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>

5. 将结束标签放在下一行：

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>

这些是我知道的修复/黑客。不确定是否还有其他方法。 :)

Answer 2

图片有一个默认的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 3

所以你可以试试这段代码，<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 4

这是因为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 5

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

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