font-size:0;作用所在

今天实现一个选项卡的效果,在布局的时候出现了这样一个问题:

font-size:0;作用所在

font-size:0;作用所在

a元素的宽度正好设置的是父级元素的1/4,按道理来讲应该是呈现一行显示,但是却换行了,问题出在这里:

font-size:0;作用所在

没有这个样式,因为:

我们平时写页面时,为了页面代码的整洁可读性,往往会设置一些适当的缩进、换行,但当元素的display为inline或者inline-block的时候,这些缩进、换行就会产生空白,所以出现上述问题。虽然还有其他方法能解决我们因为缩进、换行而产生的问题,但此时,最合适的方法就是给父级元素添加一个此样式,来消除a元素之间的空隙,

font-size:0;作用所在

同理,此方法也可以用在image上。