移动未激活的边距错误 - bootstrap

Question

我有一个django项目，我正在制作一个模板。我有一个模板，有一些HTML和CSS。我希望有一个与文本内联的图像。这种情况正在发生，但我想通过添加填充或边距将文本向下移动一点。所以我现在所拥有的是与我的html和CSS合并的bootstrap。我已经为模板添加了自定义css，它可以通过引导来获得更精致的CSS。现在我想要的是将| username向下移动几个像素。我将在下面提供所有代码并提供示例图像..

这是我的html模板代码：

<div class="row solid-borders">
  <div class=" col-md-2 border-padding">
    <img src="{% static 'images/yap-logo-possible-1.png'%}" class="header-icon-size" style="display:inline;" alt="">
    <h1 class="border-padding border-margin-top" style="display:inline;">|  {{ user.username }}</h1>
  </div>
</div>

这是我添加的自定义css：

.border-padding {
  padding: 8px !important;
}

.border-margin-top {
  padding-top: 25px !important;
}

.solid-borders {
  border-bottom: 1px solid black !important;
}

我在其中加入了引导程序

示例图片：

Answer 1

你需要添加display：inline-block;而不是显示：内联，你可以将元素向下移动几个像素

.border-padding {
  padding: 8px !important;
}

.border-margin-top {
  padding-top: 25px !important;
}

.solid-borders {
  border-bottom: 1px solid black !important;
}

<div class="row solid-borders">
  <div class=" col-md-2 border-padding">
    <img src="{% static 'images/yap-logo-possible-1.png'%}" class="header-icon-size" style="display:inline-block;" alt="">
    <h1 class="border-padding border-margin-top" style="display:inline-block;">|  {{ user.username }}</h1>
  </div>
</div>