[分享]css两张图片间的空隙

在CSS中，很多人会遇到两张图片间产生空隙的问题，这个问题也让很多人感到困惑。那么为什么图片之间会产生空隙的呢？ 造成这个问题的原因是因为在HTML中图片标签之间有空格、回车或者Tab等空白字符，这些...

在CSS中，很多人会遇到两张图片间产生空隙的问题，这个问题也让很多人感到困惑。那么为什么图片之间会产生空隙的呢？
造成这个问题的原因是因为在HTML中图片标签之间有空格、回车或者Tab等空白字符，这些空白字符都会被显示出来，导致图片之间产生空隙。要解决这个问题可以用CSS中的一些方法来避免。
一种解决方法是使用 “font-size:0;” 的方式，将字体大小设为零。这个方法很简单，直接在外层容器中加入样式即可。

  <div style="font-size:0">
    <img src="image1.jpg">
    <img src="image2.jpg">
  </div> 

还可以使用 “float:left” 的方式，让两张图片浮动，并将它们的父容器的样式设置为 “overflow:hidden;”。

  <div style="overflow:hidden">
    <img style="float:left" src="image1.jpg">
    <img style="float:left" src="image2.jpg">
  </div> 

最后一种方法是将两张图片放在同一个标签中，将它们设置为 "display: inline-block"，这样就可以将它们放在同一行内。

  <div>
    <img style="display:inline-block" src="image1.jpg">
    <img style="display:inline-block" src="image2.jpg">
  </div> 

以上三种方法都可以有效地解决图片之间产生空白的问题。可以根据不同的需求选择不同的方法来解决这个问题。