html - CSS - div 上的边距

Question

我想在这里垂直对齐 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) 上设置一个 padding-top 来将文本向下移动一点。然而，当我添加一个 padding-top 时，所有的盒子都会被放下。

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

Answer 1

当您使用 inline-block 时，每个 block 的作用就好像它所在的文本在基线上对齐(默认情况下)。如果增加第二个 block 的高度，基线会下降，第一个 block 也会下降。

您可以使用 vertical-align: top 来改变它。