避免img之间的空格

如何避免img标签之间的空格？避免img之间的空格

在打印屏幕上的内容被标记

enter image description here

代码：

#menu > img { 
    margin:0px; 
    padding:0px; 
} 

<div id="menu"> 
    <img src="/gfx/menu.home.png" /> 
    <img src="/gfx/menu.functions.png" /> 
    <img src="/gfx/menu.prices.png" /> 
</div>

来源

2012-02-11 clarkk

如何删除填充和边距？ – IamStalker 2012-02-11 22:41:45

你是什么意思？已更新我的问题 – clarkk 2012-02-11 22:45:35

你可以把它放在http://jsfiddle.net？ – IamStalker 2012-02-11 22:49:41

你可以把它们飘浮：

#menu { 
    overflow: auto; 
} 

#menu > img { 
    float: left; 
}

现场演示：http://jsfiddle.net/bzWYX/

顺便说一句我也问过类似的问题here。

来源

2012-02-11 22:58:59

您当前的解决方案不起作用，但是'font-size：0px'的确如此 – clarkk 2012-02-11 23:07:44

@clarkk浮动应该工作。兄弟姐妹和漂浮在同一侧的图像应该压在一起（除非它们有边距或边框）。我很想看到你的问题的演示。 – 2012-02-11 23:14:11

在你的代码中删除img标签之间的空格。

<div id="menu"> 
    <img src="/gfx/menu.home.png" /><img src="/gfx/menu.functions.png" /><img src="/gfx/menu.prices.png" /> 
</div>

来源

2012-02-11 22:50:13

这么糟糕的解决方法。 HTML应该忽略空格，我不明白为什么不总是这样。 – bricker 2012-02-11 23:17:12

@bricker解析HTML源代码时，如果浏览器遇到一系列空格字符，它会将该序列压缩为一个空格。但是，如果两个''标签之间至少有一个空格字符，浏览器将在DOM中的这两个图像元素节点之间创建一个Text节点。 – 2012-02-11 23:23:53

白色空格会被忽略，但不是最后一个。如果一起有多个空格，则它们都将被忽略，但是最后一个（默认情况下）。在我看来，CRLF也应该被默认忽略。 – 2012-02-11 23:25:17

<div> 
    <img src="/gfx/menu.home.png" /><img src="/gfx/menu.functions.png" /><img src="/gfx/menu.prices.png" /> 
</div>

放在同一行的IMG标签就可以了。

来源

2012-02-11 22:51:49

避免img之间的空格

回答

相关问题