html - 使两个标题直接位于彼此下方

Question

我正在尝试将两个标题直接写在另一个标题之上，中间没有空格，如下所示:

标题1
header 2

header2 的顶部应该几乎接触到 header1 的底部。

我正在使用 bootstrap，两个标题之间有很大的差距。 我已经尝试重写该类以删除顶部和底部边距，但差距仍然存在。

我该怎么做？

<div class="row even">
    <div class="col-md-12">
        <h1 id="row-bottom-margin" class="text-center"> A Title </h1>
            <div class="col-md-12">
                <h3 id="row-top-margin" class="text-center"> Title 2 </h3>
            </div>
    </div>
</div>

CSS:

#row-top-margin{
margin-top: 0px;
}

#row-bottom-margin{
margin-bottom: 0px;
}

Answer 1

您需要重置标题的边距并对 h2 应用负边距:

h1, h2 {
  margin: 0;
}

h2 {
  margin-top: -0.5em;
}

确保在 Bootstrap css 之后应用您的 css，以便样式被覆盖。

示例:http://www.bootply.com/0Njb4PrXSi

---

编辑: 更新代码示例 ( http://www.bootply.com/3HG9MmaROJ )

重新排列 html，如:

<div class="row even">
    <div class="no-margin col-md-12">
        <h1 class="text-center">A Title</h1>
        <h3 class="text-center">Title 2</h3>
    </div>
</div>

并使用no-margin 类来改变边距:

.no-margin h1, .no-margin h3 {
    margin 0;
}

.no-margin h3 {
    margin: -0.75em;
}