正确的HTML标记语法？(删除内联块元素之间的空格)

Question

当html代码没有'美化'时,它看起来像

<div><img src="img1.jpg"/><img src="img2.jpg"/></div>

然后这些图片呈现为

|=||=| //no gap between

<div>
    <img src="img1.jpg"/>
    <img src="img2.jpg"/>
 </div>

他们是这样渲染的

|=| |=| // gap (space) between

因此,相同的代码呈现不同.我想知道如何为html内联元素(和html)做正确的语法？

(内联可能是'块'元素),所以我不知道,如何编写人类可读和正确呈现的代码(至少内联元素之间没有间隙).

有什么建议？=)

Answer 1

有几种选项以易于阅读的方式显示内联块元素,其中没有一个是完美的.

选项1:左浮动

以下是Floats的教程:http://css.maxdesign.com.au/floatutorial/ 强烈建议所有前端开发人员精通这门课程.

选项2:嵌套注释(已发布)

<div>
    <img src="img1.jpg"/><!-- 
 --><img src="img2.jpg"/>
</div>

备选方案3(可能在将来):( text-space-collapse: discard;以前white-space-collapse: discard;)

white-space-collapse由于浏览器采用率较低,因此不推荐使用CSS属性(请参阅下面的评论).看来这个属性不再是文本修饰规范的一部分.我也发现text-space-collapse了对未来的考虑.

选项4:不要尝试

使用display时,你不能指望有漂亮的代码:inline-block.我认为你使用内联块和美丽代码的愿望是相互排斥的而不使用float:left.

选项5:添加font-size: 0到父元素.显然这对Safari不起作用,因此该解决方案具有类似的价值white-space-collapse: discard;.

@ktamlyn`white-space-collapse`已被删除,而且它没有在任何地方实现,所以没有理由提及它."文本空间崩溃"是在[文本4级初稿](http://dev.w3.org/csswg/css4-text/#white-space-collapsing)中提出的(尚未作为TR发布) .该草案本身尚未准备好实施.因此,我不会将这些属性列为选项,因为它们不是,但在底部有一个注释,其中包含有关此可能即将发布的属性的信息. (2认同)

Answer 2

根据您的浏览器,它可能会呈现为空格.你可以试试这个:

<div>
    <img src="img1.jpg"/><!-- 
 --><img src="img2.jpg"/>
</div>

<!-- 是一个注释标记,将被浏览器忽略.