1.两个input框因为都是行内块元素，所以有间隙问题，和无法对齐；
.html
2.解决办法
给 input 的父级盒子加 font-size：0； 可解决input标签间的间隙问题；
给 input 标签加vertical-align：middle；可解决无法对齐问题；
.css
两个span间存在间隙？
原因：span的行内元素，但是项目所需需要设成行内块元素，所以就存在间隙了；
解决：
给两个span包起来的div设置font-size：0；width：100%；
给span标签再设置font-size：16px / 1rem；
补充
图片居中？
使用text-align：center；
margin：0 auto 居中要配合固定的Width才生效，另外用了position，margin也就不能居中了；
<div id="blog_post_info"> 好文要顶 关注我 收藏该文 党欣彤 关注 - 5 粉丝 - 9 +加关注 0 0 <div class="clear"></div> <div id="post_next_prev"> <a href="https://www.cnblogs.com/dxt510/p/7214274.html" class="p_n_p_prefix">« </a> 上一篇： <a href="https://www.cnblogs.com/dxt510/p/7214274.html" title="发布于 2017-07-20 20:14">vue和angular双向数据绑定原理</a> <br> <a href="https://www.cnblogs.com/dxt510/p/7463229.html" class="p_n_p_prefix">» </a> 下一篇： <a href="https://www.cnblogs.com/dxt510/p/7463229.html" title="发布于 2017-09-01 15:00">点击开关按钮，通过改变类名切换按钮</a>这个跟基线对齐有关系，如果你给写文字的那个span设置一个vertical-align:top,就可以对齐，具体原因如下：从CSS2的可视化格式模型文档中可以看到：inline-block的基线是正常流中最后一个line box的基线，除非这个line box里面既没有line boxes或者本身overflow属性的计算值不是visible，这种情况下基线是margin底边缘。举例：
<style> .dib-baseline{ display: inline-block; width: 150px; height: 150px; border: 1px solid #cad5eb; background-color: #f0f3f9; margin-top: 20px; } </style> <span class="dib-baseline"></span> <span class="dib-baseline">dib-baseline</span>运行结果：
因为前面的盒子没有任何字符，此时它的基线就是它的底边缘，后面的盒子有文字，所以该盒子的基线就是文字的基线，二者基线对齐，现成如此效果。如果把第二个盒子line-height:0，此时文字基线的位置，就是文字的垂直中心，所以： 这就是为什么出现这个问题的原因，通过改变对齐方式可以达到对齐。具体关于vertical-align的讲解可以看看张鑫旭老师的CSS深入理解之vertical-align
