h1とh2の間のスペースを削除する

Question

私は何とか解決できないような問題を遭遇しましたが、おそらく私はdivを間違った方法で使用していますか？

.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クラス関数を使用している疑いがあります。これは理論的な疑問です。

Answer 1

見出しh6からh1デフォルトで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>

Answer 2

HTML見出しタグは、ほとんどのブラウザに適用されるいくつかのデフォルトのCSS値を持っています。続いて、デフォルトではそれらに適用されh1とh2の値なので、あなたがあなたのh1とh2間の間隔を小さくしたい場合はh1とh2のmargin-topのmargin-bottomをオーバーライドする必要があります。

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>

Answer 3

ただ、次の行を追加します

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