在引导程序中删除标题的上边距答案

【问题标题】：Remove the top margin of header in bootstrap在引导程序中删除标题的上边距
【发布时间】：2020-10-05 12:09:22
【问题描述】：

HTML

<div class="container-fluid">
  <div class="row">
    <div class="page-header header_site">
      <h1><font>ABC Company</font></h1>
    </div>
  </div>
</div>

CSS 代码：

.header_site {
  background-color: darkblue;
}

font {
  color: white;
  margin: auto 160px auto 160px;
}

我想删除下图中标记的上边距。

【问题讨论】：

<font> 已被弃用，不应再使用。我很惊讶他们还在教这个。
你需要将margin:0;设置为h1并将.page-header类设置为margin-top:0
@Paulie_D 感谢您提供信息。

标签： html css twitter-bootstrap-3

【解决方案1】：

将你的 h1 和页眉的 margin-top 设置为 0，并确保你的正文没有任何填充：

body { padding: 0; }
.page-header,
.page-header h1 {margin-top:0;}

Example bootply

如果你需要你的h1 向下移动一点，那么给它padding-top

【讨论】：

【解决方案2】：

对于 Bootstrap 3，只需添加类“媒体标题”

<h1 class="media-heading"><font>ABC Company</font></h1>

【讨论】：

【解决方案3】：

修改样式如下

.header_site {
  background-color: darkblue;
  margin:0;
  float:left;
  width:100%
}

【讨论】：

【解决方案4】：

h3 {
  margin-top: revert !important;
  margin-bottom: revert !important;
}

它将 h3 样式恢复为浏览器样式。 developer.mozilla.org 说它在 chrome 上不起作用，但我检查了一下，它运行良好。

【讨论】：

【解决方案5】：

请添加以下 css。默认情况下 HTML 有它自己的 margin 用于 h1 标签，这就是为什么它发生在 .page-header h1 类中添加 margin-top:0; .

.page-header h1 { margin-top: 0; }

.header_site {
  background-color: darkblue;
}
font {
  color: white;
  margin: auto 160px auto 160px;
}
.page-header h1 {
  margin-top: 0;
}

<div class="container-fluid">
  <div class="row">
    <div class="page-header header_site">
      <h1><font>ABC Company</font></h1>
    </div>
  </div>
</div>

【讨论】：

【解决方案6】：

只需重写类page-header 并标记<h1>：

.page-header {
  margin: 0 0 20px;
}
.page-header h1 {
  margin-top: 0;
}

jsfiddle-link

【讨论】：