Question

我试图在页面中间放置一个滑动图像。我几乎已经完成了，事情就是内部的每一块图像我都有一个小空间，就好像它有一些小填充（它没有），有没有人在代码中看到错误？

<style type="text/css">
  html, body, #wrapper, images {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    border: 0px;
    background-color: #000;
  }

  img {
    margin: 0px;
    padding: 0px;
    border: 0px;
  }

  .center {
    width: 800px;
    height: 600px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -400px;
    margin-top: -300px;
  }

  .center_mini {
    margin: 0px;
    padding: 0px;
    border: 0px;
  }

  .center_mini_float {
    float: left;
    margin: 0px;
    padding: 0px;
    border: 0px;
  }
</style>
<div class="center">
  <div class="center_mini">
    <img src="images/background_01.png" width="800" height="144" alt="bg">
    <div class="center_mini">
      <div class="center_mini_float">
        <img src="images/background_02.png" width="503" height="456" alt="bg">
      </div>
      <div class="center_mini_float">
        <div class="center_mini">
          <div class="center_mini">
            <img src="images/background_03.png" width="246" height="89" alt="bg">
          </div>
          <div class="center_mini">
            <img src="images/background_05.png" width="246" height="106" alt="bg">
          </div>
          <div class="center_mini">
            <img src="images/background_06.png" width="246" height="102" alt="bg">
          </div>
          <div class="center_mini">
            <img src="images/background_07.png" width="246" height="159" alt="bg">
          </div>
        </div>
      </div>
      <div class="center_mini_float">
        <img src="images/background_04.png" width="51" height="456" alt="bg">
      </div>
    </div>
  </div>


  <!--<img src="images/background.jpg" width="800" height="600" alt="bg">-->
</div>

Answer 1

尝试添加：

img { display: block; }

Answer 2

问题是IMG标签的自然DISPLAY值为“INLINE”。这会导致在某些情况下图像周围出现额外的空白。

根据您的布局需求，尝试

img { display: block; }

或

img { display:inline-block; }

如果您的图像以其他方式工作，内联块将导致最少量的捶打。

更多信息： http://www.w3schools.com/cssref/pr_class_display.asp http://www.tequilafish.com/2009/04/29/css-removing-extra-space-underneath-an-image/

Answer 3

我认为更好的解决方案是使用

img { vertical-align: middle; }

这样您就不会替换默认的浏览器图像显示。此外，请确保图像容器的行高：100％，这也可能导致问题。

Answer 4

默认情况下，图片有display:inline;，这就是造成图片之间空白的原因。你可以做三件事来阻止这个：

float:left;

或

display:inline-block;

或

display:block;

DIV内部不需要的空间

4 个答案: