图像之间有额外的白色 space？

Question

所以我在我正在构建的网站上有一排图像，并且有一些未编码的白色-space b/w 图像。

边距设置为零，调试器也不显示任何填充或边框。我不知道为什么 white-space 在那里。

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

顺便说一句，我在GoogleChrome

这是它的屏幕截图

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

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

在您的 .carousel-inner 样式中设置 font-size: 0。

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

Answer 3

因为inline-block元素之间默认白色space，尝试在每个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

inline/inline-block 元素就是这样呈现的。有几种方法可以消除这些空格。

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

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>

另一种是将parent的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>

如果那里有文本，请记住重置 children 的 font-size。

你也可以像这样使用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>

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

将结束标记放在下一行：

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>

这些是我所知道的fixes/hacks。不太确定是否还有其他方法。 :)

图像之间有额外的白色 space？

Extra white space between images?

html

css

google-chrome

image

removing-whitespace