css隐形的空隙(inline的坑)_html/css_WEB-ITnose-html教程-PHP中文网

css隐形的空隙(inline的坑)_html/css_WEB-ITnose

php中文网

发布： 2016-06-21 09:17:30

原创

1314人浏览过

好久没写东西了,最近有点忙,再加上自己在捣鼓一个video转gif的东西(github:传送门),是一个用node-webkit(mac版用atom-shell)做的一个桌面应用,也就没怎么写东西,不过刚好弄这东西的时候遇到了空隙的问题就来查查资料,讨论讨论,研究研究.....

先看下debug代码

<!DOCTYPE html><html>  <head>  <style media="screen">    div {      display: inline-block;      background-color: yellow;      padding: 2px;      /*font-size:0;*/    }    img {      /*vertical-align:bottom;*/      /*display: block;*/    }    span {      font-size:80px;    }  </style> </head>  <body>    <div>      <img  src="js.png" / alt="css隐形的空隙(inline的坑)_html/css_WEB-ITnose" >    </div>     <span>phantom</span>  </body></html>

登录后复制

只是普通的用div装一个img,然后让div比img多出1px(有点类似于边框),可是问题来了,上图:

很明显,黄色的部分是div的padding,可是下面的padding比较大.

立即学习“前端免费学习笔记（深入）”；

解决的方法有3种(也就是我css注释掉的3行):

给父亲元素加上--

1:font-size:0;

或者给img元素加上--

2:vertical-align:bottom;

3:display: block;