web-dev-qa-db-ja.com

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

どうしても解決できないような問題に遭遇しました。divsを間違って使用しているのではないでしょうか?

.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>

これが結果です:

SS

<h1><h2>の間のスペースを減らしたいのですが、その方法はline-heighth10pxに設定することであることがわかりました。

しかし、そうすると、ページ全体が次のように移動します。

SS

line-heightを変更する前と同じ位置にテキストを保持したい。私はdivクラス関数を間違って使用していると思われます。これは理論的な問題です。

6
user3552616

見出し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>
12
dippas

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>_
3
Muhammad

次の行を追加するだけです

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