Question

我是CSS的新手，所以有一个简单的问题。

这是我的脚本=＆gt;

<!DOCTYPE html>
 <html>
 <head>
 <title>Default</title>
 <meta charset="UTF-8">
 <style type="text/css">
    body,div,html,img
    {
        margin: 0;
        padding: 0;
        border: 0;
    }
  </style>
  </head>
  <body>
      <div>
          <img src="/project/pics/5.jpg" width="240" height="200">
          <img src="/project/pics/10.jpg" width="240" height="200">
          <img src="/project/pics/10.jpg" width="240" height="200">
      </div>
   </body>
 </html>

所以我的问题是，尽管图像之间的CSS重置是空格，这当然会在样式布局后引起一些问题，所以任何人都知道如何解决，如何重置CSS，图像之间没有任何空格，谢谢。 ..

我猜了哈哈，它真的很简单，只需要写成一行，否则必须声明为font-size：0;

谢谢大家:)）

Answer 1

发生这种情况的原因是浏览器将图像之间的换行符解析为空格。图像是内联元素，当使用空格（或换行符）时，它们之间会有一个文字空间。

要消除问题，可以在图像上float: left;，或者只是消除换行符（如同，将它们全部放在同一行，标签之间没有空格）。
另一种解决方案是在父项上设置font-size: 0;，然后在元素本身上设置font-size: 16px;。

Answer 2

对于完整的CSS重置，请改用

*{
    margin: 0;
    padding: 0;
    border: 0;
}

然后浮动图像元素

img{
   float: left;
}

Answer 3

尝试将它们向左浮动。见example

Answer 4

您可以将图像连续：

  <div>
      <img src="/project/pics/5.jpg" width="240" height="200" /><img
           src="/project/pics/10.jpg" width="240" height="200" /><img
           src="/project/pics/10.jpg" width="240" height="200" />
  </div>

或者，你可以做一些事情（我不认为css重置）来处理：

letter-spacing: -1em;

重置css（img）

4 个答案: