CSS: h要素の余白を取る時の書き方

Question

CSSでh要素を使うと1行分の余白が出てきてしまいますが、その余白をとるときに

h1{
    margin: 0;
}

を使うと思います。
ですが、クラスの中でmargin: 0; をつかっても適用されません。

HTML
<div class="aa">
    <h1>Hello world!</h1>
</div>

CSS 
.aa{
    margin: 0;
}

このように定義してもh要素の余白は無くなりません。

.aa h1{
    margin: 0;
}

のようにしてあげないと余白は無くなりません。

なぜでしょうか？
h１と宣言するのとしないのでは具体的にどのような違いがあるのかご教授お願いします。

Answer 1

こう考えてみるとわかりやすいでしょうか。

<div style="margin:0;">
    <h1>Hello world!</h1>
</div>

上記ではdivのmarginが0になります。

<div>
    <h1 style="margin:0;">Hello world!</h1>
</div>

上記ではh1のmarginが0になります。

そのため、

<div class="aa">
    <h1>Hello world!</h1>
</div>

この場合.aaの中のh1にmarginを設定したいのであれば、質問文にもある通り

.aa h1{
    margin: 0;
}

となります。

h1{
    margin: 0;
}

だけでうまくいかない場合には、他の要素や別のスタイルの記述があるか、デフォルトの余白等が関係しているかもしれません。
リセットCSSやノーマライズCSSを利用しているか、しているならばそこにどんな指定がされているかもチェックしてください。

Answer 2

適用対象が違うからです。優先度の問題ではありません。

<div class="aa">
    <h1>Hello world!</h1>
</div>

このHTML断片に対し、CSSが

.aa{
    margin: 0;
}

であれば、その対象はh1要素ではなくdiv要素ということになります。
divのマージンはゼロになりますが、h1には依然として(デフォルトスタイルの)マージンが残ります。divにborderでもつけて確認してみてください。

<div>
    <h1 class="aa">Hello world!</h1>
</div>

この場合であればh1と書かなくてもマージンがゼロになることがわかると思います。

Comments

[Nippun]

入れ子内にはクラスは適用されないということですか？
入れ子内にもクラスを適用させるには１つ１つのタグにクラスかIDをつけなければならないということですか？

[x_x]

回答中にあるように、divに適用され、divのマージンがゼロになっています。

[Nippun]

ですがdiv内にあるh1には.aaで書いたfont-family, font-sizeが適用されているのですがそれはなぜですか？

[x_x]

継承があるからです。
https://developer.mozilla.org/ja/docs/Web/CSS/inheritance

margin (継承不可)
https://developer.mozilla.org/ja/docs/Web/CSS/margin

font-size (継承する)
https://developer.mozilla.org/ja/docs/Web/CSS/font-size

font-family (継承する)
https://developer.mozilla.org/ja/docs/Web/CSS/font-family

[Nippun]

スッキリしました。
ありがとうございます。

Answer 3

.aa で効かなくて .aa h1 で効くなら他の箇所に優先度が高いCSSが有ると思います。

【スタイルの優先順位－CSSの基本】
http://www.htmq.com/csskihon/007.shtml

【CSSが効かないときの優先順位チェック(3)～点数計算編】
https://naifix.com/css-priority-3/

Answer 4

1行分の余白が出て来るなら、｢margin: 0;｣ではないと思います。

line-height: 1;

尚、h要素の上下に余白があれば、これで良いと思いますが、
上下の余白ではなく、上又は、下のいずれかの余白をなくしたいのであれば、

margin-top: -50px;
もしくは、
margin-bottom: -50px;

↑
このように負の値にすれば、できますが、どうでしょうか？

Answer 5

リセットCSSで定義済みなのでしょうか？定義していないのならば、定義してみてください。

定義済みであれば、定義内容が間違ってたり再定義していないかの確認と「kei344」さんご提示の参照リンク先で優先順位を確認してみてください。

Comments

[yoshinavi]

「x_x」さんとの受け答えを見て思ったのですが、冒頭の＜h1＞にリセット掛けてなかったのでしょうか？
であれば「x_x」さんのご指摘通り、デフォルト設定が残っていますので、リセットし直せば良いと思います。