3

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

这是我的脚本 =>

<!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，谢谢...

我猜lol，真的很简单，就是必须写成一行，否则必须声明font-size: 0;

谢谢大家:))

4

4 回答 4

7

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

为了消除问题，无论是float: left;在图像上，还是简单地消除换行符（例如，将它们全部放在同一行，标签之间没有空格）。
另一种解决方案是先设置font-size: 0;父元素，然后再font-size: 16px;设置元素本身。

于 2012-02-29T19:23:00.517 回答
1

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

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

然后浮动图像元素

img{
   float: left;
}
于 2012-02-29T19:19:02.573 回答
1

尝试将它们向左浮动。看这个例子

于 2012-02-29T19:21:04.803 回答
1

您可以将图像连续放置：

  <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 reset）来处理：

于 2012-02-29T19:40:48.757 回答