vertical-align的使用

vertical-align的属性

    

vertical-align怎么生效 

只有一个元素属于inline或是inline-block（table-cell也可以理解为inline-block）水平，其身上的vertical-alige属性才会起作用

vertical-align属性是如何起作用的

<span class="box">
    <span class="dot"></span>
    我是一段卡哇伊的文字。
</span>

 

示例一：默认属性（也就是baseline）

.box{background:black; color:white; padding-left:20px;}
.dot{display:inline-block; width:4px; height:4px; background:white;}

示例二：bottom（top同理） 

box{background:black; color:white; padding-left:20px;}
.dot{display:inline-block; width:4px; height:4px; background:white; vertical-align:bottom;}

示例三：text-bottom

.box{background:black; color:white; padding-left:20px;}
.dot{display:inline-block; width:4px; height:4px; background:white; vertical-align:text-bottom;}

 

我们对比一下bottom和text-bottom

实例五：middle

.box{background:black; color:white; padding-left:20px;}
.dot{display:inline-block; width:4px; height:4px; background:white; vertical-align:middle;}

 

实例六：设置数值

.box{background:black; color:white; padding-left:20px;}
.dot{display:inline-block; width:4px; height:4px; background:white; vertical-align:-2px;}