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

如何在不影响其他字段的情况下向字段添加更多填充？

1 个答案: