どうしても解決できないような問題に遭遇しました。div
sを間違って使用しているのではないでしょうか?
.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>
これが結果です:
<h1>
と<h2>
の間のスペースを減らしたいのですが、その方法はline-height
のh1
を0px
に設定することであることがわかりました。
しかし、そうすると、ページ全体が次のように移動します。
line-height
を変更する前と同じ位置にテキストを保持したい。私はdivクラス関数を間違って使用していると思われます。これは理論的な問題です。
見出しh1
からh6
にはデフォルトでmargin
があるため、リセットする必要があります。設定: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>
HTML見出しタグには、ほとんどのブラウザで適用されるデフォルトのCSS値がいくつかあります。以下は、デフォルトで適用される_h1
_および_h2
_の値です。したがって、_margin-bottom
_の_h1
_および_margin-top
_の_h2
_をオーバーライドする必要があります。 SOMECODE)__ _h1
_と_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>
_
次の行を追加するだけです
.greeting h1 {
margin:0px;
line-height:35px;
}
.greeting h2 {
margin:0px;
line-height:35px;
}