深入css之去除inline-block元素之间的多余间隙
什么是inline-block之间的多余间隙
考虑以下代码:
<nav> <a href="#">One</a> <a href="#">Two</a> <a href="#">Three</a> </nav>
nav a { display: inline-block; //或者inline; padding: 5px; background: red; }
我们会得到如下结果:
诶?我们明明没有在设置margin-right,为什么a标签之间会有间隙?
答: 产生的间隙来自于html代码中标签与标签之间的间隙, 该间隙会根据父容器的字体大小而变化(上述示例代码中,nav的font-size越大,该间隙越大)。
如何去除这些多余的间隙?
在明确了这些间隙产生的原因后,要去除这些间隙就变得容易多了,通常有以下集中办法去除这些间隙:
1.去除html代码中的间隙:
将代码写成一行:
<nav> <a href="#">One</a><a href="#">Two</a><a href="#">Three</a> </nav>
或者用注释填充:
<nav> <a href="#">One</a><!-- --><a href="#">Two</a><!-- --><a href="#">Three</a> </nav>
都可以去掉这些多余间隙。
优点: 不需要通过css处理,从根本上解决问题
缺点: 代码可读性降低,项目里写成这样估计会被吊起来打。
2.通过负的margin抵消多余间隙
nav a { display: inline-block; padding: 5px; background: red; margin-right: -4px; //增加了这一行 }
优点: 简单
缺点: 由于多余间隙的大小会受父容器的font-size大小影响,所以margin-right的值要依情况设置,不好控制。
3.父容器设置font-size:0; 内部子元素单独设置字体大小,即:
nav { font-size: 0; //增加了这一行 } nav a { display: inline-block; padding: 5px; background: red; font-size: 14px; //增加了这一行 }
优点:相比与设置负的margin-right大小的不确定性,设置font-size:0;显得更加好控制。
缺点:由于font-size的可继承性,导致其子元素都继承font-size:0;只能重写覆盖。如果项目中的字体大小设置采用的是em而不是px, 那么子元素的字体大小就无法通过em来进行设置了(不管多少em都是0)。
4.父容器设置display: flex;
优点:弹性布局可以去除多余间隙,而且可以轻松的实现垂直居中,水平居中等效果。
缺点:过低版本的浏览器不支持该属性。
相关推荐
沈宫新 2020-01-02
nicepainkiller 2020-01-04
LiybSunshine 2015-12-11
覆雪蓝枫 2019-06-27
afeichuanqi 2019-06-26
yibawuqing 2019-06-25
csscode 2013-01-06
jianqi 2019-06-20
liusure0 2012-03-09
淡风wisdon大大 2011-06-10
每天积累一点点 2011-04-13
林一天 2010-09-16
MoeRookie 2010-09-14
Ladyseven 2010-09-14
MoeRookie 2010-09-03
tivon仔 2010-09-02