行內塊元素出現間隙的問題

在設置子級元素的display爲inline-block時出現了一個問題：原本想作到父盒子的高度由子盒子撐開，結果發現父盒子的高度比子盒子高了4px,設置display爲block時就沒有出現這個問題。

 <style>
        .dv {
            background-color: pink;
            height: auto;
            width: 500px;
        }
        .son1 {
            width: 200px;
            height: 200px;
            background-color: #22ff52;
            display: inline-block;
        }
    </style>
<div class="dv">
    <div class="son1"></div>
</div>

效果：

出現該問題的本質緣由是：內聯元素的默認垂直對齊方式是和基線對齊，並非和底部對齊。即默認vertical-align屬性值爲baseline。

吐槽一句：這個屬性值對塊級元素沒有用致使不多使用！默認和基線對齊也是由於英文的緣由吧。。。

在出現內聯元素的地方就有可能出現多出空隙的問題，好比說在div內部放入一個img標籤，也會出現這種狀況！

解決辦法：1.浮動（可能致使父元素塌陷的問題，注意父級元素清除浮動）

　　　　　2.轉化爲塊級元素

　　　　　3.定位（使用定位時脫離文檔流，注意父元素塌陷，定位徹底脫離父元素，清除浮動沒用）　

以上幾種方法是比較暴力的解決辦法，不少時候咱們不想定位、浮動，更是不想轉化爲塊級元素，這時候就要從本質上解決問題。

實際上形成空隙的緣由是由於內聯元素的默認vertical-align：baseline以及父級元素默認的行高問題

參考http://www.zhangxinxu.com/wordpress/?p=4925

 

對應解決辦法：1.修改父級元素：line-height:0；會致使內部文本咋樣就不說了吧

　　　　　　　2.修改父級元素：font-size:0;　會致使內部文本咋樣就不說了吧

　　　　　　　3.修改內聯元素：vertical-align：根據需求能夠改成middle、top、bottom、text-bottom等值，這種方式解決空隙問題比較好

top	把元素的頂端與行中最高元素的頂端對齊

middle	把此元素放置在父元素的中部。
bottom	把元素的底端與行中最低的元素的頂端對齊。
text-bottom	把元素的底端與父元素字體的底端對齊。