css - 如何在不影响另一个字段的情况下向字段添加更多填充？

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，因为您没有为问题中的这两个元素提供任何样式)。