Little steps

神奇的 inline-block

2017-8-13

突然发现inline-block真是个神奇的属性呢~
当写下下面的代码的时候
<style>
    .div1{
        width: 200px;
        height: 200px;
        display: inline-block;
        background-color: #F98E90;
    }
    .div2{
        width: 200px;
        height: 200px;
        display: inline-block;
        background-color: #B9D7EA;
    }
</style>
<div class="div1"></div>
<div class="div2"></div>
你会看到下面的两个彩色块(自古红蓝出CP)
当我给红色块加点文字时
我是一个有文字的红色块
两个div块都添加文字
我是一个有文字的红色块
我也有文字!!!
咦~~~

发现只有红色div有文字时它会下沉,其实它们对于文字有一个基线,默认是在父元素的基线(baseline),可以通过修改vertical-align来修改基线位置,下面是vertical-align:top

我是一个有文字的红色块

其实还是没有真正的明白基线是什么东西。


Written by MaryMa A front end developer who makes slow progress and never gives up.