关于css中inline-block 对齐的问题

代码在这里 http://js.jirengu.com/lokeqecigo/2/edit?html,css,js,output

其中小div里 写了one1 就会对不齐，如果删掉文本就可以对齐。什么原因？怎么解决？
css代码
.one div,.two div,.three div,.four div{

        width: 60px;
        height: 50px;
        margin: 5px 10px;
        /*float: left;*/
        display: inline-block;
        border: 1px #bbb solid;
        background: #ddd;
    } 

---

加这个就可以了 vertical-align: top;

---

http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/
可以看看这篇文章，讲的很好