行内块元素出现间隙的问题

在设置子级元素的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	把元素的底端与父元素字体的底端对齐。