HTML/CSS中是否有任何东西告诉浏览器完全忽略空白?
很多时候，当你想把两张图片放在一起时，你拼命地想保持HTML的可读性，但浏览器在它们之间放了一个空格。
所以不是这样的:
<img src="images/minithing.jpg" alt="my mini thing" />
<img src="images/minithing.jpg" alt="my mini thing" />
<img src="images/minithing.jpg" alt="my mini thing" />
<img src="images/minithing.jpg" alt="my mini thing" />
你会得到这个
<img src="images/minithing.jpg" alt="my mini thing" /><img src="images/minithing.jpg" alt="my mini thing" /><img src="images/minithing.jpg" alt="my mini thing" /><img src="images/minithing.jpg" alt="my mini thing" />
这太可怕了!
这是一个简单的问题，但答案并不那么简单。
人们可以尝试避免源代码中的空格，这在CMS中并不总是可以实现，因为它们是由系统自动插入的。如果你想改变这一点，你必须深入挖掘CMS的核心代码。
Then you can try to use left floated images. But this is dangerous. At first you don't really have a control over vertical-alignment by definition. And secondly, you run into total chaos if you have so many floated elements, that they stretch over more than one line. And if you have a layout that relies on left floated elements (most of them do so today) you can even break some outer floating styles, if you clear floating after the images. This can be overridden, if you float any surrounding element. Rather not to be recommended.
因此，唯一的解决方案是使用CSS声明来处理空格处理过程。这不是任何标准的一部分(因为css3还没有完成)。
我更喜欢在HTML变体中没有空白。使用drupal作为CMS，这可以在你的template.php和主题文件中很容易实现。然后我选择内联块。
注:
在不同的浏览器中使用内联块相当复杂。
对于FF 2，你需要显示:-moz-inline-box。
其余的和IE8可以有display: inline-block后立即。
对于ie7，你需要在下面单独的声明中显示:inline(最好是通过条件注释)。
edit
我用来做一个元素内联块
elem.inline {
display: -moz-inline-box; /* FF2 */
display: inline-block; /* gives hasLayout in IE 6+7*/
}
/* * html hack for IE 6 */
* html elem.inline {
display: inline; /* elements with hasLayout and display inline behave like inline-block */
}
/* * + html hack for IE 7 */
* + html elem.inline {
display: inline; /* elements with hasLayout and display inline behave like inline-block */
}
这是一个简单的问题，但答案并不那么简单。
人们可以尝试避免源代码中的空格，这在CMS中并不总是可以实现，因为它们是由系统自动插入的。如果你想改变这一点，你必须深入挖掘CMS的核心代码。
Then you can try to use left floated images. But this is dangerous. At first you don't really have a control over vertical-alignment by definition. And secondly, you run into total chaos if you have so many floated elements, that they stretch over more than one line. And if you have a layout that relies on left floated elements (most of them do so today) you can even break some outer floating styles, if you clear floating after the images. This can be overridden, if you float any surrounding element. Rather not to be recommended.
因此，唯一的解决方案是使用CSS声明来处理空格处理过程。这不是任何标准的一部分(因为css3还没有完成)。
我更喜欢在HTML变体中没有空白。使用drupal作为CMS，这可以在你的template.php和主题文件中很容易实现。然后我选择内联块。
注:
在不同的浏览器中使用内联块相当复杂。
对于FF 2，你需要显示:-moz-inline-box。
其余的和IE8可以有display: inline-block后立即。
对于ie7，你需要在下面单独的声明中显示:inline(最好是通过条件注释)。
edit
我用来做一个元素内联块
elem.inline {
display: -moz-inline-box; /* FF2 */
display: inline-block; /* gives hasLayout in IE 6+7*/
}
/* * html hack for IE 6 */
* html elem.inline {
display: inline; /* elements with hasLayout and display inline behave like inline-block */
}
/* * + html hack for IE 7 */
* + html elem.inline {
display: inline; /* elements with hasLayout and display inline behave like inline-block */
}
