正确的 HTML 标记语法？（删除内联块元素之间的空格）[重复]答案

【问题标题】：Correct HTML mark-up syntax? (to remove whitespace between inline-block elements) [duplicate]正确的 HTML 标记语法？（删除内联块元素之间的空格）[重复]
【发布时间】：2013-01-15 19:21:59
【问题描述】：

当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 ）做正确的语法？

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

有什么建议吗？ =)

【问题讨论】：

这似乎是美化器中的一个错误。它不应做出可能影响渲染的更改。
@Barmar：这无法确定；美化师有时不得不猜测。（例如，如果一个样式表将white-space: pre 应用于任何事物，它将使大多数事物无法更改，并且没有简单的方法来判断何时会应用。）
更不用说::before and ::after and whitespace...
@minitech: 好像有差距=)
@EL：哦，有——重点是要说明不可能美化 HTML 并确保布局不会改变。（注意每个 <div> 中的尾随空格 - 如果添加了 ::after 元素，它们很重要，否则，它会被忽略[注意边框]。）

标签： html css syntax html-parsing

【解决方案1】：

它不漂亮，但在我看来它比评论技巧更漂亮：

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

【讨论】：

【解决方案2】：

有几个选项可以以易于阅读的方式显示内联块元素，但没有一个是完美的。

选项 1：左浮动

这里有一个关于浮点数的教程：http://css.maxdesign.com.au/floatutorial/ 强烈建议所有前端开发人员精通此主题。

选项 2：嵌套 cmets（已发布）

<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，您对 inline-block 的使用和对漂亮代码的渴望是相互排斥的。

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

【讨论】：

div 的样式="white-space-collapse:discard;" （尝试保留/折叠/保留中断/丢弃）没有效果（在歌剧 12 中）
谢谢，这就是不建议使用该选项的部分原因。选项 4 和选项 1 是我个人的选择。
是的，it was gone once。（回来了吗？）
@ktamlyn：好的。我会努力创造历史=)
@ktamlyn white-space-collapse 已被删除，并且没有在任何地方实现，因此没有理由提及它。 text-space-collapse 是在 preliminary draft of Text Level 4 中提出的（尚未作为 TR 发布）。该草案本身还没有准备好实施。因此，我不会将这些属性列为选项，因为它们不是，但在底部有一个注释，其中包含有关此潜在即将到来的属性的信息。

【解决方案3】：

我知道我会因为这样说而被讨厌。呜呜呜……

如果您想将您的 img 精确地放在彼此旁边并且有“美化”的代码，您需要使用一张表格。

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>

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

相关小提琴 http://jsfiddle.net/t4Krs/

【讨论】：

【解决方案4】：

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

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

<!-- 是一个评论标签，浏览器会忽略它。

【讨论】：