基线小结

（1）解决中间空格

 

方案一：直接把右边块放在左块后面，不换行

<divclass="container">
     <divclass="left">我是谁</div><divclass="right">who i'm i?</div>
</div>

方案二：在.container里设置字体大小为0

.container{
    width:500px;
    height:500px;
    background-color:red;
    font-size:0;
}
.left,.right{
    display:inline-block;
    font-size:10px;
}

方案三：左块设置它右边外边框距为负值

.left,.right{
    display:inline-block;
    font-size:10px;
    vertical-align:baseline;
}
.left{
    width:200px;
    height:200px;
    background-color:rosybrown;
    margin-right: -5px;
    vertical-align:top;
}

（2）baseline：基线

 

设置一个基线，以基线为准，两个块里面的内容对齐，是以右边第二个who i’m i?的基线齐平，但是左边块里面最下面基线要与右边对齐就要往下多出一行字的距离，如下：

.left,.right{
    display:inline-block;
    font-size:10px;
    vertical-align:baseline;
}

 

 

设置左边块垂直位置为top解决上面问题：

.left,.right{
    display:inline-block;
    font-size:10px;
    vertical-align:baseline;
}

...

.left{
    width:200px;
    height:200px;
    background-color:rosybrown;
    vertical-align:top;
}