带有注释的结束标签会产生“奇怪”的行为答案

【问题标题】：Closing tag with comment produce "strange" behaviour带有注释的结束标签会产生“奇怪”的行为
【发布时间】：2022-08-23 02:41:42
【问题描述】：

有人可以解释一下，为什么如果我将结束标签放在新行中并在一个按钮和另一个按钮之间添加注释，则按钮之间的空白消失并且按钮并排放置？

像这样：

<div class=\"segmented-control__row\">
      <button
        class=\"segmented-control__button segmented-control__button--active js-segmented-control__button\"
        data-value=\"1\"
      >
        Sort by price</button
      ><!--
            --><button
        class=\"segmented-control__button js-segmented-control__button\"
        data-value=\"2\"
      >
        Sort by name
      </button>
      <button
        class=\"segmented-control__button js-segmented-control__button\"
        data-value=\"3\"
      >
        Sort by relevance
      </button>
    </div>

第一个有评论，第二个没有。这就是结果。

谢谢

标签： html button tags

【解决方案1】：

在 HTML 中，空格并没有被完全忽略。很多空格（换行符、制表符、空格）将减少为一个空格，但该空格有时会导致布局出现问题。

一种选择是完全删除空格，并将 HTML 放在一行中。

您遇到的另一种选择是使用评论。通过将空白放置在注释中，它不会被渲染并与您的布局混淆。

HTML 中的空白信息：https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Whitespace

【讨论】：