当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)做正确的语法？
(内联可能甚至是’块’元素),所以我不知道,如何编写可以人类可读和正确呈现的代码(至少内联元素之间没有间隙).
有什么建议？ =)
解决方法
有几种选项以易于阅读的方式显示内联块元素,其中没有一个是完美的.
选项1：左浮动
这是一个关于Floats的教程：http://css.maxdesign.com.au/floatutorial/
强烈建议所有前端开发人员精通这一主题.
选项2：嵌套评论(已发布)
<div>
<img src="img1.jpg"/><!--
--><img src="img2.jpg"/>
</div>
选项3(可能在将来)：文本空间崩溃：丢弃; (以前的白色空间崩溃：丢弃;)
由于浏览器采用率较低,建议不要使用CSS属性white-space-collapse(请参阅下面的评论).看来这个属性不再是文本修饰规范的一部分.我还发现将文本空间崩溃作为未来的考虑因素.
选项4：不要尝试
使用display时,你不能指望有漂亮的代码：inline-block.我认为你使用内联块和美丽代码的愿望是相互排斥的而不使用float：left.
选项5：将font-size：0添加到父元素.显然这对Safari不起作用,因此解决方案与白空间崩溃具有相似的价值：丢弃;
