haizlin/fe-interview

[css] 第77天 请问display:inline-block在什么时候会显示间隙?

haizhilin2013 opened this issue · 7 comments

第77天 请问display:inline-block在什么时候会显示间隙?

DBTXf commented

在标签中会回车符,回车符相当于空白符,多个连续的空白符会合并成一个空白符,而产生“空白间隙”。

空白间隙

解决方法
1、全局font-size设置成0
2、

取消两个div之间的空格

空白间隙

解决方法
1、全局font-size设置成0
2、

取消两个div之间的空格

第二种方法需要在div上加上 vertical-align:bottom,消除底部间隙

  • display: inline-block 在IE67下会产生4px的空白间隙,原因是换行或空格会占据一定的位置。
  • 解决办法: 设置父元素的font-size: 0; letter-spaceing: -4px;

父元素的font-size没有设置为0或者继承了非零的根元素font-size的时候

  • display: inline-block 在IE67下会产生4px的空白间隙,原因是换行或空格会占据一定的位置。
  • 解决办法: 设置父元素的font-size: 0; letter-spaceing: -4px;