Un reciente estudio del HTML, la aparición de un fenómeno extraño, por primera vez la palabra de código no dice.
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
*{
margin:0;
padding:0px;
font-size: 26px;
line-height: 26px;
}
div{
width: 300px;
height: 40px;
background: pink;
display: inline-block;
}
</style>
<body>
<div class="one"></div>
<div class="two"></div><br>
<div class="three"></div>
<br>
<div class="three"></div>
</body>
</html>`
----------
Este es el código. . .
Originalmente se pensó porque el conjunto se hizo después de la línea-blcok, saltos de línea y espacios se resuelven debido, y luego más tarde fue probado y encontrado no es debido a esta razón, más recientemente a través de su propia cría, el acceso a la información, incluso encontraron una vertical-align participar yo era un fantasma.
Ahora voy a explicar por qué el siguiente, pero para entenderlo, es necesario comprender el concepto de línea de alta, la línea de base, etc.
Permítanme citar algunos ejemplos en
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
*{
margin:0;
padding:0px;
font-size: 26px;
line-height: 26px;
}
div{
width: 300px;
height: 40px;
background: pink;
display: inline-block;
}
</style>
<body>
<div class="one"></div>
<div class="two"></div><br>
x我<div class="three"></div>
<br>
<div class="three"></div>
</body>
</html>efecto:
Es posible que no note: Este fenómeno se ha explicado la razón, y ahora descendido bajo sub-:
**
1. 了解x;我们知道x的底部是基线，但是根据分析，基线下面应该有底线，底线下面有一半的行高，
2.我们可以看到x是和div垂直平齐的，这个也是google浏览器默认的文本以基线居中，但是基线下面还有到底线的距离和半个行高。因此为了容下字体，下面的div需要向下移动 基线到底线的距离+一半的行高
3.在google浏览器中，默认字体大小16px,ling-height是18px，我测量他们的缝隙是3px,就可以知道他们一半的行高是1px,基线到底线的距离是2px,
总结：这个就是出现缝隙的原因所在了。 **
Solución:
1.浮动。因为浮动不属于行内元素了。
2.改变vertical-align的对齐方式，适应top,和bottom可以消除缝隙，
注意：是用text_top 和text_bottom任然会出现缝隙但是比之前小一点，因为他们是跟字体对齐，换句话说，他们没有基线到底线的距离，只有一半行高的距离，所以缝隙会变小。