1
突然发现inline-block真是个神奇的属性呢~
当写下下面的代码的时候
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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

我是一个有文字的红色块

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