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

Question

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

我知道文本是垂直居中的，但是因为没有字母向下，所以感觉与图标不对齐。当添加填充或边距时，文本将保持在相同位置，我不知道为什么。我删除了所有徒劳的尝试，只剩下所需的代码。我尝试使用padding，margin，line-height，但没有任何效果。您可以在此处找到该设计的完整实时预览：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

在跨度上的徽标旁边加上商标SteemMakers，然后可以在其上添加padding-top。这是适合您的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;
}

Answer 3

在html中，img标签和文本中有a，通过它很难设置文本对齐方式，因为两者都将相对于a标签对齐。但是您可以根据自己的需要做一件事来移动img。

设置

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

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

Answer 4

这应该使图像上下移动，在所有视口中都能正常工作

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