使用display:inline-block产生间隙

使用display:inline-block产生间隙

一、产生的原因:当初设立标准的不是亚洲而是欧洲,inline元素为了正确显示英文字母如y j g等带有尾巴的,就在底下留空。
二、解决办法:

四个div之间有小间距,解决办法:让水平间隙消失就是在父级上加font-size:0;要设置字体大小可以在子元素里再设置。
让垂直间隙消失,就在子元素上加vertical-align:bottom。

如果子标签内有文字,则display:inline-block元素不会生成垂直方向有空白! 下面是解决好的效果:

原文地址:https://www.cnblogs.com/annie211/p/5890329.html