html - CSS-div上的边距

我正在尝试在div中垂直对齐一些文本：
HTML：

<div class="div1">
    <div class="div11">
        <img src="https://pbs.twimg.com/media/BrJSq87IMAAD3Zg.png" alt="" width="40px">
    </div>
    <div class="div12">
        <a href="">yo</a>
        </br>
        <a href="">yo</a>
    </div>
</div>

CSS：

.div1 {
    height: 40px;
}

.div1 div {
    display: inline-block;
}

.div12 {
    padding-top: 5px;
}

JSFiddle：
http://jsfiddle.net/4mVPG/1/

div的高度是固定的，因此我要做的就是在最后一个div（.div12）上设置一个填充顶部，以将文本向下移动一点。但是，当我添加一个填充顶部时，所有框都被放下。

为什么会发生这种情况，我该如何解决？谢谢

最佳答案

使用inline-block时，每个块的行为就像在基线上默认情况下（在默认情况下）是文本所在的位置。如果增加第二个块的高度，则基线会下降，第一个块也会下降。

您可以使用vertical-align: top进行更改。

关于html - CSS-div上的边距，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24455155/