Question

我在两个IMG标签之间有额外填充（4px）时遇到问题。这种情况发生在Mac（Snow Leopard）上的Firefox 7.0.1，Safari 5.1.1，Chrome 11.0.696.68和Opera 10.53中。

我在这里上传了这个例子： http://husnoo.com/img_extra_space/img_extra_space.html

截图显示： http://husnoo.com/img_extra_space/shot.png

两个IMG之间的4个像素不应该在那里。

谢谢！

纳瓦勒。

代码：

<!DOCTYPE html>
<html>
<head>
    <title>Title here</title>
    <style type="text/css">
        body {
            margin: 0px;
            padding: 0px;
        }
        toolbar {
            background-color: #ddd;
            margin: 0px;
            padding: 0px;
            width: 32px;
            height: 32px;
        }

        #tool1 {
            background-color: #0dc;
            margin: 0px;
            padding: 0px;
            width: 32px;
            height: 32px;
        }

        #tool2 {
            background-color: #6dc;
            margin: 0px;
            padding: 0px;
            width: 32px;
            height: 32px;
        }
    </style>
</head>
<body>
    <div id="toolbar">
        <img id="tool1" src="select.png">
        <img id="tool2" src="transform_move.png">
    </div>
</body>
</html>

Answer 1

不要在图像之间断开线而不是

<img id="tool1" src="select.png">
<img id="tool2" src="transform_move.png">

DO

<img id="tool1" src="select.png"><img id="tool2" src="transform_move.png">

Answer 2

您必须删除两个img标记之间的空格。

或者您可以向他们添加display:block;和float:left;

IMG之间的CSS中的额外填充

2 个答案: