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

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，因爲你還沒有爲你的問題中的這兩個元素提供任何樣式）。