質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

5回答

11929閲覧

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

Nippun

総合スコア1147

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2017/12/10 01:22

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

CSS

1h1{ 2 margin: 0; 3}

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

HTML <div class="aa"> <h1>Hello world!</h1> </div> CSS .aa{ margin: 0; }

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

CSS

1.aa h1{ 2 margin: 0; 3}

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答5

0

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

html

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

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

html

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

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

そのため、

html

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

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

css

1.aa h1{ 2 margin: 0; 3}

となります。

css

1h1{ 2 margin: 0; 3}

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

投稿2017/12/11 01:29

dit.

総合スコア3235

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

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

HTML

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

このHTML断片に対し、CSSが

CSS

1.aa{ 2 margin: 0; 3}

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

HTML

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

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

投稿2017/12/11 01:02

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Nippun

2017/12/11 01:09

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

2017/12/11 01:28

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

2017/12/11 01:36

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

2017/12/11 01:48

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

0

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

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

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

投稿2017/12/10 03:52

編集2017/12/10 12:09
kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

line-height: 1;

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

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


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

投稿2017/12/10 01:57

amaryllis

総合スコア179

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

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

投稿2017/12/10 11:58

yoshinavi

総合スコア3521

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yoshinavi

2017/12/11 01:21

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問