正确的HTML标记语法？ （删除inline-block元素之间的空格） [英] Correct HTML mark-up syntax? (to remove whitespace between inline-block elements)

问题描述

当html代码未被美化时，它看起来像

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

然后这些照片呈现为

  | = || = | // 
之间没有差距 

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

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

它们呈现如下

  | = | | = | // 
之间的间隙（空格） 

我想为html内联元素（和所有的html）如何做正确的语法？

（内联可以是甚至块元素） t知道，如何编写可以人类可读和正确呈现的代码（至少在内联元素之间没有间隙）。

有任何建议吗？ =）

解决方案

有几个选项以容易阅读的方式显示inline-block元素， / p>

选项1 ：左浮点

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时有漂亮的代码。这是我的意见，你的使用inline-block和美丽的代码的欲望是互斥的，不使用float：left。

选项5 ：向父元素添加 font-size：0 。显然这不适用于Safari，所以解决方案的价值类似于 white-space-collapse：discard; 。

When html code is not 'beautified', it looks like

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

And then these pictures rendered as

|=||=| //no gap between

But after beautifier http://ctrlq.org/beautifier/

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

They are rendered like this

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

So, same code rendered differently. I want to figure how to do correct syntax for html inlined elements (and html at all)?

(inlined could be even 'block' elements), so I don't know, how to write code that could be human readable and rendered correctly (without gaps between inlined elements at least).

Any suggestions? =)

解决方案

There are several options to displaying inline-block elements in a easily read manner, none of which are perfect.

Option 1: Left Floats

Here is a tutorial on Floats in general: http://css.maxdesign.com.au/floatutorial/ It is highly recommended for all front end developers to be well versed in this subject.

Option 2: Nested comments (already posted)

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

Option 3 (potentially in the future): text-space-collapse: discard; (previously white-space-collapse: discard;)

The CSS property white-space-collapse is not recommended because of poor browser adoption (see comment below). It appears this property is no longer a part of the text decoration specification. I have also found reference to text-space-collapse as being considered for the future.

Option 4: Don't try

You can't expect to have beautiful code when using display:inline-block. It is my opinion that your use of inline-block and desire of beautiful code are mutually exclusive without use of float:left.

Option 5: Add font-size: 0 to a parent element. Apparently this doesn't work with Safari, so the solution is of similar value to white-space-collapse: discard;.

这篇关于正确的HTML标记语法？ （删除inline-block元素之间的空格）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！