关于input元素 和display:inline-block 的元素不在一水平线上的一点发现

每次用到了<input/> 元素 和inline-block的<span></span>（不一定是span，其他一些inline的元素也是一样）元素，他们总是会不在一个水平线上，有时候用浮动可以解决。

但是有的时候并不想用浮动解决，这时候可以用vertical-aline来实现。

在W3School中，对于 vertical-aline 的介绍是：该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。

也就是说，我在这个元素 加了vertical-aline属性之后，其他和他同一行的带有inline 属性的元素就会根据vertical-aline的值来与他对齐。

上图情况就是我今天遇到的，于是我就在后面的<span>提交</span>这里加了vertical-aline。情况得到改善

但是这样想让他有间距，却不能在span这里加margin了，不然还是会错位，只能在input上面加。看下图

这是在span加的margin

这是在input加的margin

原因可以通过图片看出来，加了margin之后，span在文本流中所占的高度，是margin值加上他的height，而vertical-aline之后，其他元素参照对齐的位置是就是他在文本流中所占高度的位置，所以导致错位的出现。只要将margin加在其他元素上，就不会有这个问题。

以上都是一点个人理解，如果有错的地方，欢迎指正。谢谢！

对了，最后，还有就是<input type="checkbox"/>复选框 与 12px 文字的对齐问题，实际上只要再input 上面加vertical-aline:middle  就可以解决。

关于这个 我也是在大神张鑫旭 的个人博客里面学到的。

PS:CSDN 写博客的时候，下面选择个人分类的复选框就没有对齐 如果给复选框加vertical-aline: middle就会对齐。