LikeToLearnStuff LikeToLearnStuff - 1 year ago 88
CSS Question

Making two headers directly below each other

I'm trying to write two headers directly above one another with no space in between like so:



The top of header2 should almost be touching the bottom of header1.

I'm using bootstrap and there is a large gap between the two headers.
I've tried overriding the class to remove the top and bottom margins but the gap is still there.

How can I do this?

<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>


margin-top: 0px;

margin-bottom: 0px;

Answer Source

You need to reset the margin of the headers and apply negative margin to the h2:

h1, h2 {
  margin: 0;

h2 {
  margin-top: -0.5em;

make sure your css is applied after the bootstrap css, so that the styles get overwritten.


edit: updated example for your code (

rearrange the html like:

<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>

and use no-margin class to change the margin:

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

.no-margin h3 {
    margin: -0.75em;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download