haizlin / fe-interview

前端面试每日 3+1,以面试题来驱动学习,提倡每日学习与思考,每天进步一点!每天早上5点纯手工发布面试题(死磕自己,愉悦大家),6000+道前端面试题全面覆盖,HTML/CSS/JavaScript/Vue/React/Nodejs/TypeScript/ECMAScritpt/Webpack/Jquery/小程序/软技能……

Home Page:http://www.h-camel.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

haizhilin2013 opened this issue · comments

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

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的时候

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