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则会增加容器的大小