css隐形的空隙(inline的坑)_html/css_WEB-ITnose
程序员文章站
2022-06-02 23:38:32
...
好久没写东西了,最近有点忙,再加上自己在捣鼓一个video转gif的东西(github:传送门),是一个用node-webkit(mac版用atom-shell)做的一个桌面应用,也就没怎么写东西,不过刚好弄这东西的时候遇到了空隙的问题就来查查资料,讨论讨论,研究研究.....
先看下debug代码
phantom
只是普通的用div装一个img,然后让div比img多出1px(有点类似于边框),可是问题来了,上图:
很明显,黄色的部分是div的padding,可是下面的padding比较大.
解决的方法有3种(也就是我css注释掉的3行):
给父亲元素加上--
1:font-size:0;
或者给img元素加上--
2:vertical-align:bottom;
3:display: block;
但是,这是为什么?如果一般的猴子,肯定会用,能解决问题就行了,但是我们不是一般的猴子,我们是程序猿!!!
想来想去,既然font-size:0;能解决,应该和font有关.
为了解释为什么,我又切了2张图来辅助理解,上图:
第一张图,我用控制台来当量尺,移到div的padding一样大的时候,发现只有P的下面被挡道了,其他的好像距离控制台的空隙都一样大,所以我又截了第二张图,
vertical-align是用来设置基线的,font-size为0的时候,就不存在基线的差距,所以应该是基线搞定鬼~
一番*之后发现,原来vertical-align的默认基线是Base Line,(所以p才会有一部分被挡道了).
写到这里,突然想起之前2个inline元素之间有空隙,也是给父亲元素加上font-size来解决的,而这次给img加上block也可以解决问题,说到底还是inline元素的锅~.所有的inline元素都有和文字一样具有字号和行高属性,所以img也会被基线影响到,这就是问题所在
下一篇: Web前端热门框架大全
推荐阅读
-
请大家帮我看一下我这段代码中的ul和a为什么不能显示在同一行中。_html/css_WEB-ITnose
-
chrome中不可见字符引发的float问题_html/css_WEB-ITnose
-
栅格布局的两种简单的实现方式_html/css_WEB-ITnose
-
css3实现的文本无法选中效果_html/css_WEB-ITnose
-
div+css布局时的浏览器兼容问题_html/css_WEB-ITnose
-
一款纯css3实现的机器人看书动画效果_html/css_WEB-ITnose
-
CPropertySheet标签页 实现各个CPropertyPage页面之间的切换_html/css_WEB-ITnose
-
急急急急急 求人帮忙调html框架集的布局,急急急急急急_html/css_WEB-ITnose
-
有谁知道这种窗口是怎么做的?_html/css_WEB-ITnose
-
初学者,js写的一个俄罗斯方块问题_html/css_WEB-ITnose