Removing space between h1 and h2

Question

I have stumbled across a problem that I can not seem to solve in any way, maybe I am using divs in a wrong way?

.greeting h1 {
  font-family: 'Raleway', sans-serif;
  font-weight: lighter;
  font-size: 100px;
  text-align: center
}
.greeting h2 {
  font-family: 'Raleway', sans-serif;
  font-weight: lighter;
  font-size: 35px;
  line-height: 0px;
  text-align: center
}

<div class="greeting">
  <h1>Hi.</h1>
  <h2>Select a group</h2>
</div>

This is the outcome:

I want to decrease the space between my <h1> and <h2>, and I found out that the way to do that was to set line-height in h1 to 0px.

But as I do that my entire page moves up like so:

I want to keep the text at the same position as it was before I change the line-height. I am suspecting that I am using the div class function wrong. This is more of theoretical question.

dippas · Answer 1 · 2016-11-26T20:25:30.897

headings h1 to h6 have margin by default, so you need to reset it, setting: margin:0.

.greeting h1 {
  font-family: 'Raleway', sans-serif;
  font-weight: lighter;
  font-size: 100px;
  text-align: center;
  margin: 0
}
.greeting h2 {
  font-family: 'Raleway', sans-serif;
  font-weight: lighter;
  font-size: 35px;
  text-align: center;
  margin: 0
}

<div class="greeting">
  <h1>Hi.</h1>
  <h2>Select a group</h2>
</div>

score 6 · Answer 2 · answered Nov 26 '16 at 20:27

HTML heading tags have some default CSS values applied in most browsers. Following are the values of h1 and h2 that are applied to them by default, so you need to override the margin-bottom of h1 and margin-top of h2 if you want to decrease the spacing between your h1 and h2.

h1 { 
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

h2 {
  display: block;
  font-size: 1.5em;
  margin-top: 0.83em;
  margin-bottom: 0.83em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

.greeting h1 {
  font-family: 'Raleway', sans-serif;
  font-weight: lighter;
  font-size: 100px;
  text-align: center;
  margin-bottom: 0;
}
.greeting h2 {
  font-family: 'Raleway', sans-serif;
  font-weight: lighter;
  font-size: 35px;
  line-height: 0px;
  text-align: center;
  margin-top: 0;
}

<div class="greeting">
  <h1>Hi.</h1>
  <h2>Select a group</h2>
</div>

score 2 · Answer 3 · edited Nov 16 '17 at 09:28

2

Just add the following lines

.greeting h1 {
  margin:0px;
  line-height:35px;
}
.greeting h2 {
  margin:0px;
  line-height:35px;
}

edited Nov 16 '17 at 09:28

Paolo Forgia

6,572
8
46
58

answered Nov 16 '17 at 09:25

Varun Jain

109
1
5

score 1 · Answer 4 · edited Dec 19 '22 at 12:16

1

If you just want you to assign the margin only for this block you do not need to define it globally you can just do the same this using inline CSS

<h1  style="margin-bottom: 0">Hi</h1>
<h2  style="margin-top: 0">Select a group</h2>

edited Dec 19 '22 at 12:16

maxshuty

9,708
13
64
77

answered Jan 17 '21 at 09:22

INDRAJITH EKANAYAKE

3,894
11
41
63

Removing space between h1 and h2

4 Answers4

Linked

Related