两个行内元素的间隙问题和基线不对准的问题

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