如何在此文本上设置填充或边距

Question

我正在使用Bootstrap navbar的网站上工作。我希望品牌名称略低，以更好地与品牌形象保持一致。

我理解文本是垂直居中的，但因为没有字母向下，所以感觉不对齐图标。添加填充或边距时，文本保持在相同的位置，我不明白为什么。我删除了所有徒劳的尝试，只剩下所需的代码。我尝试使用填充，边距，行高，但没有任何效果。可在此处找到完整的设计实时预览：https://www.steemmakers.com/test/Home.html

如何轻轻移动文字？

<nav class="navbar navbar-expand-md bg-primary navbar-dark">
  <div class="container">
    <a class="navbar-brand d-block d-md-none" href="#" style="display: block; font-family: 'Rajdhani', sans-serif; font-weight:700; font-size:25px; color:white">
      <img src="steemmakers_icon_white.svg" height="56px"> SteemMakers 
    </a>
    <a class="navbar-brand d-none d-md-block" href="#" style="display: block; font-family: 'Rajdhani', sans-serif; font-weight:700; font-size:40px; color:white">
      <img src="steemmakers_icon_white.svg" height="56px"> SteemMakers 
    </a>
  </div>
</nav>

Answer 1

您需要做的就是使用span标记包围SteemMakers文本，并将以下样式应用于它：

position: relative;
top: 3px;

刚刚使用Chrome开发工具对其进行了测试，请告诉我它是否适合您。

Answer 2

在html中，img标签和文本中有a，通过它可以很难设置文本对齐，因为两者都将对齐a标签。但你可以做一件事，根据你的要求移动img。

组

img {
  position: relative;
  top: -3px;
}

根据您的要求，使用top bottom left right根据文本移动图像。

Answer 3

这应该向上/向下移动图像，在所有视口中都能很好地工作

.navbar-brand img {
    margin-top: -5px;
}

Answer 4

在徽章上包裹您的品牌名称SteemMakers，然后您可以在其上添加填充顶部。这是你的html和css

<nav class="navbar navbar-expand-md bg-primary navbar-dark">
  <div class="container">
    <a class="navbar-brand d-block d-md-none" href="#" style="display: block; font-family: 'Rajdhani', sans-serif; font-weight:700; font-size:25px; color:white">
      <img src="steemmakers_icon_white.svg" height="56px"> <span class="brand-name">SteemMakers</span> 
    </a>
    <a class="navbar-brand d-none d-md-block" href="#" style="display: block; font-family: 'Rajdhani', sans-serif; font-weight:700; font-size:40px; color:white">
      <img src="steemmakers_icon_white.svg" height="56px"> SteemMakers 
    </a>
  </div>
</nav>

品牌名称的示例CSS

.brand-name {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    padding-top: 5px;
}