display中的基线问题

当用display：inline-block来布局时，当div里面有文字时，布局

就会上下不在一个水平线，而且两个div之间会产生一条缝。如下图

所示

原因：字体下面有一条基线，就是最后一行字体所在的水平线，默认为基线对齐，

而左边只有一行字，右边有三行字，默认最后一行对齐，所以垂直方向不对齐。

而水平方向有一条线的原因是display：inline-block把块及标签改成了内联标签，然

后在代码中多了一个空格，所以有一条缝。

解决方法：

   垂直不居中：

        设置vertical-align: top，就是垂直对齐方式为从顶部对齐

   水平有缝：

1、  两个div之间不要空格。

<div class="bigbox">
    <div class="left">
        <p>左边第一行</p>
    </div><div class="right">
        右边第一行
        右边第二行
        右边第三行
    </div>
</div>

2、  设置margin-left:-10px;

3、  在内部样式中设置font-size为0，调试的时候可以用内联样式来设置字体大小。