communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel HTML > le corps du texte

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

WBOY
Libérer： 2016-06-21 09:17:30
original
1024 Les gens l'ont consulté

好久没写东西了,最近有点忙,再加上自己在捣鼓一个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>
Copier après la connexion

只是普通的用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也会被基线影响到,这就是问题所在

Étiquettes associées：
css隐形的空隙(inline的坑)
source：php.cn
Article précédent：IE11兼容模式下，use.typekit.net在线字库不起作用_html/css_WEB-ITnose Article suivant：UI插件【B-JUI页面id唯一】_html/css_WEB-ITnose
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...
Depuis 2024-04-29 11:01:01
0
2
1898
Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
Depuis 2024-04-23 00:22:19
0
10
2065
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
Depuis 2024-04-19 15:37:47
0
1
1738
Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...
Depuis 2024-04-18 23:52:34
0
1
1641
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
1652
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal