换行符为何在一种场景下破坏CSS布局，另一种却不会？（附示例）

我来帮你梳理这两个表单示例的核心差异——其实就差在一个换行处理上！

唯一的不同点在于第二个示例里，</label>闭合标签后没有换行，直接衔接了下一个<label>标签；而第一个示例中，</label>结束后有一个换行，让两个<label>元素在代码结构上是分开的。

第一个示例（带换行的代码片段） #

<label for="address_state" class="state"> 
  <span>State</span>
  <input name="address_state" type="text" placeholder="CA" required="" class="field is-empty"> 
</label>
<label for="address_zip" class="zip"> 
  <span>ZIP</span>
  <input name="address_zip" type="text" placeholder="12345" required="" class="field is-empty"> 
</label>

第二个示例（无换行的代码片段） #

<label for="address_state" class="state"> 
  <span>State</span>
  <input name="address_state" type="text" placeholder="CA" required="" class="field is-empty"> 
</label><label for="address_zip" class="zip"> 
  <span>ZIP</span>
  <input name="address_zip" type="text" placeholder="12345" required="" class="field is-empty"> 
</label>

顺带提一句：在常规的HTML渲染中，这种换行通常不会影响页面的实际布局（除非你的CSS专门处理了空白字符），但会直接影响代码的可读性，带换行的版本显然更易维护和调试。

内容的提问来源于stack exchange，提问作者Ryan