如何添加更多的填充字段而不影响另一个字段？

Question

我有下面的代码：

<a class="my-profile" href="link"> 
    <div class="my-picture">[picture]</div> 
    <div class="my-fields"> 
    <span class="my-name">[name]</span> 
    <span class="my-medal">[medal]</span> 
    </div> 
</a> 

它具有以下主题化：

.my-profile { 
    background-color: black; 
    color: white; 
    display: inline-block; 
    height: 35px; 
    padding-left: 5px; 
    padding-right: 5px; 
    text-decoration: none; 
} 

.my-picture { 
    display: inline-block; 
    padding-top: 5px; 
    height: 25px; 
    width: 25px; 
} 

.my-fields { 
    display: inline-block; 
    font-size: 13px; 
    padding-left: 5px; 
    padding-top: 8px; 
    vertical-align: top; 
} 

.my-medal { 
    padding-left: 5px; 
    height: 16px; 
    width: 16px; 
} 

我想一些更顶级的填充添加到奖牌场，但是当我添加padding-top: 5px到.my-medal类，名称字段也被移动。

为什么会发生这种情况，我该如何预防它？

Answer 1

垂直取向只需设置顶端上.my-name和.my-medal元件二者：

.my-name, .my-medal { 
    vertical-align: top; 
} 

JSFiddle demo。 （注意，为了显示这个工作，我不得不指定display: inline-block，因为你还没有为你的问题中的这两个元素提供任何样式）。