margin-bottom和vertical-align的区别
CSS是一个很细节的东西,有很多值得研究!
HTML如下
<div class="box">
<img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" class="mb-200" />张含韵
</div>
<div class="box">
<img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" class="va-200" />张含韵
</div>
CSS如下
.box{ text-align: center; background-color: #4BC8E6; width: 40%; float: left; margin-left: 2%; } .mb-200{ margin-bottom: -50px; } .va-200{ vertical-align: -40px }
效果如下
可以看出当margin-bottom为负值时会缩小容器的大小,而vertical-alian则会增加容器的大小