困然许久的vertical-aligin，间隙的出现并非bug,!!!!

时间 2019-11-08

标签许久 vertical aligin 间隙出现并非 bug 繁體版

原文原文链接

最近学习一个html,出现一个奇怪的现象，话很少说先贴代码。html

`<!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>`


----------

这是代码。。。浏览器

当初认为因为设置成了line-blcok以后，换行和空格都被解析形成的，然是后来已测试，发现根本不是这个缘由形成的，最近通过本身的苦思冥想，查阅资料，居然发现是vertical-align搞得鬼。学习

如今我来解释下缘由，不过要明白的话，须要了解行高，基线等概念
我先在举几个例子测试

<!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>

效果：字体

可能你们没注意到：这个现象已经说明了缘由，如今我来分下下：
**google

1. 了解x;咱们知道x的底部是基线，可是根据分析，基线下面应该有底线，底线下面有一半的行高，


2.咱们能够看到x是和div垂直平齐的，这个也是google浏览器默认的文本以基线居中，可是基线下面还有到底线的距离和半个行高。所以为了容下字体，下面的div须要向下移动  基线到底线的距离+一半的行高
3.在google浏览器中，默认字体大小16px,ling-height是18px，我测量他们的缝隙是3px,就能够知道他们一半的行高是1px,基线到底线的距离是2px,
总结：这个就是出现缝隙的缘由所在了。

**
解决办法：spa

1.浮动。由于浮动不属于行内元素了。
2.改变vertical-align的对齐方式，适应top,和bottom能够消除缝隙，
注意：是用text_top 和text_bottom任然会出现缝隙可是比以前小一点，由于他们是跟字体对齐，换句话说，他们没有基线到底线的距离，只有一半行高的距离，因此缝隙会变小。