问题
I have stumbled across a problem that I can not seem to solve in any way, maybe I am using div
s 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.
回答1:
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>
回答2:
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>
回答3:
Just add the following lines
.greeting h1 {
margin:0px;
line-height:35px;
}
.greeting h2 {
margin:0px;
line-height:35px;
}
来源:https://stackoverflow.com/questions/40822576/removing-space-between-h1-and-h2