haizlin/fe-interview

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

haizhilin2013 opened this issue · 7 comments

haizhilin2013 commented

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

DBTXf commented

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

YeYongFen commented

空白间隙

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

取消两个div之间的空格

hishuling commented

空白间隙

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

取消两个div之间的空格

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

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

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

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