困然許久的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任然會出現縫隙可是比以前小一點，由於他們是跟字體對齊，換句話說，他們沒有基線到底線的距離，只有一半行高的距離，因此縫隙會變小。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。