CODEWITHSUNDEEP
htmlcsshtml-heading
user3552616
user3552616

Reputation:

Removing space between h1 and h2

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:

SS

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:

SS

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.

Upvotes: 11

Views: 63428

Answers (4)

INDRAJITH EKANAYAKE
INDRAJITH EKANAYAKE

Reputation: 4294

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>

Upvotes: 1

Varun Jain
Varun Jain

Reputation: 119

Just add the following lines

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

Upvotes: 2

Muhammad
Muhammad

Reputation: 7344

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>

Upvotes: 7

dippas
dippas

Reputation: 60573

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>

Upvotes: 21

Related Questions