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

【问题标题】：How to set padding or margin on this text如何在此文本上设置填充或边距
【发布时间】：2019-02-26 23:54:11
【问题描述】：

我正在开发一个使用 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>

【问题讨论】：

使用 line-height 属性

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

你需要做的就是用 span 标签包围 SteemMakers 文本，并对其应用以下样式：

position: relative;
top: 3px;

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

【讨论】：

谢谢，这对我来说似乎是最简单的解决方案。

【解决方案2】：

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

设置

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

将您的品牌名称SteemMakers 包装在一个span 上，然后您可以在其上添加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;
}

【讨论】：