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

Question

当html代码没有“美化”时，它看起来像是

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

然后这些图片呈现为

|=||=| //no gap between

但是在美化http://ctrlq.org/beautifier/之后

<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;）

由于浏览器采用率较低，建议不要使用CSS属性white-space-collapse（请参阅下面的评论）。看来这个属性不再是文本修饰规范的一部分。我还发现将text-space-collapse作为未来考虑的参考。

选项4 ：不要尝试

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

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

Answer 2

根据您的浏览器，它可能会呈现为空格。你可以试试这个：

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

<!--是一个注释标记，浏览器会忽略它。

Answer 3

我知道我会因为这样说而受到憎恨。 Buuuuut ....

如果你想将你的img精确定位在彼此旁边，并且有美化＆＃34;您需要使用表格的代码。

Cue screaming

使用css，你可以用div中的2 img做任何你想做的事情，除了把它们恰好放在一张桌子上。

此代码......

<div>
    <table cellspacing="0" cellpadding="0">
        <tr>
            <td>
                <img src="img1.jpg"/>
            </td>
            <td>
                <img src="img2.jpg"/>
            </td>
        </tr>
    </table>
</div>

会得到你想要的结果，但问题是，你之后能和自己一起生活吗？

Relevent fiddle http://jsfiddle.net/t4Krs/

Answer 4

它不漂亮，但它比我认为的评论技巧更漂亮：

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