1.两个input框因为都是行内块元素,所以有间隙问题,和无法对齐;
.html
![](https://i-blog.csdnimg.cn/blog_migrate/177582fa1827e792769145defaa47043.png)
2.解决办法
给 input 的父级盒子加 font-size:0; 可解决input标签间的间隙问题;
给 input 标签加vertical-align:middle;可解决无法对齐问题;
.css
![](https://i-blog.csdnimg.cn/blog_migrate/4a49f4c52c54d3b4fed8b28aa117cf0d.png)
两个span间存在间隙?
原因:span的行内元素,但是项目所需需要设成行内块元素,所以就存在间隙了;
解决:
给两个span包起来的div设置font-size:0;width:100%;
![](https://i-blog.csdnimg.cn/blog_migrate/1afe14623172663a8d653832e67967e4.png)
给span标签再设置font-size:16px / 1rem;
![](https://i-blog.csdnimg.cn/blog_migrate/c02d5908290eb700004a3bcc37e884f2.png)
补充
图片居中?
使用text-align:center;
margin:0 auto 居中要配合固定的Width才生效,另外用了position,margin也就不能居中了;
<div id="blog_post_info">
这个跟基线对齐有关系,如果你给写文字的那个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>
运行结果:
![](https://i-blog.csdnimg.cn/blog_migrate/645b351cac1f44df61efbb0ebb99d4e6.png)
因为前面的盒子没有任何字符,此时它的基线就是它的底边缘,后面的盒子有文字,所以该盒子的基线就是文字的基线,二者基线对齐,现成如此效果。
如果把第二个盒子line-height:0,此时文字基线的位置,就是文字的垂直中心,所以:
![](https://i-blog.csdnimg.cn/blog_migrate/c0a131bcca9ff0222fbc73e42fb6c174.png)
这就是为什么出现这个问题的原因,通过改变对齐方式可以达到对齐。
具体关于vertical-align
的讲解可以看看张鑫旭老师的CSS深入理解之vertical-align