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

在設置子級元素的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	把元素的底端與父元素字體的底端對齊。