html 页面空白节点问题

最近碰到一个 html/css 的问题，困扰了我好久。

先看下面的图片：

image.png

这是个很简单也很常见的表单，当然现在没加什么样式。但是我调试了很久却发现，最下面的选择框左边怎么也对不齐。

我的代码如下：

<div>
  <span>姓名: </span><input type="text"/>
</div>
<div>
  <span>年龄: </span><input type="number"/>
</div>
<div>
  <span>出生年月: </span><input type="date"/>
</div>
<div>
  <span>性别: </span>
  <select>
    <option value="男" selected>男</option>
    <option value="女">女</option>
  </select>
</div>

div > span {
  width: 100px;
  display: inline-block;
  margin-right: 20px;
  /* border: 1px solid red; */
  text-align: right;
}
input{
  display: inline-block;
}
select{
  display: inline-block;
}

我相信有经验的前端程序员应该能够一眼发现问题上面的代码问题所在，但是我相信肯定有很多人会像我一样，很难发现对不起的源头所在。

我尝试过各种方案，甚至于我还从 select 标签本身去找问题，但是统统好像没发现问题在哪儿。

因为一开始，我都是用谷歌浏览器去调试代码的，万般无奈下，我想试试火狐，是不是也会出现同样的问题，于是我满怀期待的用火狐浏览器打开页面。

然后果然 如我所料的情况一般，该有的问题还是存在，不该有的问题也来了：

image.png

于是我尝试打开火狐浏览器的调试器，审查元素的过程中，无意中发现了问题所在：

image.png

原来这里面有个空白节点，导致出现了无法对其的问题。

于是我机智的删掉这个空白节点：

image.png

再一看页面，果然元素就对的很齐了：

image.png

于是我恍然大悟，原来之所以导致这个错误，是因为我忽略了空白节这个在 html 页面中老生常谈的话题。

如果有兴趣详细的了解这个话题，可以去看看 mdn 上面这篇文章，里面有详细的介绍：https://developer.mozilla.org/zh-CN/docs/Web/Guide/API/DOM/Whitespace_in_the_DOM

因为在这个问题上，不同浏览器的处理方式是不一样的，因此如果不是我尝试了多个浏览器，可能我很难找到问题所在，因为我刚开始都是从元素自身去找问题，从 css 本身找问题，甚至于我尝试用搜索引擎去搜索问题，但是都未果，因为我根本没有意识到是因为空白字符导致的。

所以解决方案就仅仅是简单的将换行符删除掉就行了：

<div>
  <span>姓名: </span><input type="text"/>
</div>
<div>
  <span>年龄: </span><input type="number"/>
</div>
<div>
  <span>出生年月: </span><input type="date"/>
</div>
<div>
  <span>性别: </span><select>
    <option value="男" selected>男</option>
    <option value="女">女</option>
  </select>
</div>

其实这个地方，跟我自己本身有点洁癖也有关，因为本身我格式化代码以后，出来的是这样的效果：

image.png

我不太明白为什么 </span> 的右尖括号被格式化到下一行的开头去了，现在才发现，原来是为了避免空白字符的产生，影响排版格式。

所以说，有些看起来很简单，理所当然的东西，如果深究下去，是有很多细节的知识点在里面的，千万不要看轻。