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

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

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

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

CSS

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

Q&A

解決済

3回答

7554閲覧

cssで子要素のmargin指定で親要素にも影響を与えてしまう理由について

bah91929

総合スコア19

CSS3

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

CSS

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

1グッド

1クリップ

投稿2018/11/08 05:18

編集2018/11/08 08:14

ご回答者様

お世話になっております。

質問タイトルが分かりにくくて恐縮ですが、「子要素のmargin指定で親要素にも影響を与えてしまう理由」について教えていただけますと幸いです。

例えば以下のコードを例にご質問させていただきます。

HTML

1<div class="midashi_bg10"> 2 <div class="container2" align="center"> 3  <div class="row row-div_width"> 4   <div class="div_width"> 5    <img class="img-responsive" src="img/img1.png"><br>買取希望商品をダンボール箱に同梱します 6   </div> 7   <div class="div_width"> 8    <img class="img-responsive" src="img/img2.png"><br>隙間のないよう箱に詰めていただき緩衝材(古新聞)などで隙間をうめていただきます。 9   </div> 10   <div class="div_width"> 11    <img class="img-responsive" src="img/img3.png"><br>身分証、買取依頼書を同封してガムテープで閉め、外側に発送伝票を貼って発送してください。 12   </div> 13 </div> 14  <p class="text_red padding20 text-left">注意 : 査定額にご同意いただけない場合は返却は可能ですが、その際は送料はお客様側の負担でお願いいたします。また一部のみの返却はトラブルを避けるためお受けできません。 15  </p> 16 </div> 17</div>

css

1.midashi_bg10{ 2 height: 1000px; 3 background-repeat: no-repeat; 4 background-position:top; 5 background-color: antiquewhite; 6} 7.row{ 8 display: flex; 9 justify-content:center; 10} 11.row-div_width{ 12 width: 1200px; 13} 14.div_width{ 15 width: 315px; 16} 17.img-responsive{ 18 display: block; 19}

ーーーーーブラウザ上ーーーーーーーーーーー
イメージ説明
ーーーーーーーーーーーーーーーー
1つ目の質問は、

<div class="midashi_bg10">の子要素「<div class="container2 align="center">」にmargin-top:100px;をかけると、子要素だけではなく、親要素(div class="midashi_bg10">)もmargin-top:100px;分の余白ができるのはなぜでしょうか? ```css .container2{ background-color:aqua; margin-top: 100px; } ``` ーーーーーブラウザ上ーーーーーーーーーーー ![イメージ説明](fd763e2cd99d826464a8b44ae39d36ce.png) ーーーーーーーーーーーーーーーー 子要素だけがmargin-top:100px;となり、親要素の上端は一番上の赤ラインに揃うものだと思いました。 親要素にmarginは指定していませんが、これはいわゆるmarginの相殺と呼ばれるものでしょうか? ーーーーーーーーーーーーーーーー 2つ目の質問は、 <div class="div_width">にmargin-top:100px;をかけると、 親要素<div class="midashi_bg10">や<div class="container2 align="center">、 <div class="row row-div_width">は余白ができず、 <div class="div_width">だけmargin-top:100px;が効くのはなぜでしょうか? ```css .div_width{ width: 315px; margin-top: 100px; } ``` ーーーーーブラウザ上ーーーーーーーーーーー ![イメージ説明](63f780eb889cbdd5fe3f91f2339b5ba3.png) ーーーーーーーーーーーーーーーー 以上、marginについてご質問させていただきました。

長くなり恐縮ですが、ご回答くださいますと幸いです。

Lhankor_Mhy👍を押しています

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

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

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

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

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

dice142

2018/11/08 05:23

コードはコードブロック(```)で囲みましょう
bah91929

2018/11/08 07:25

ご回答ありがとうございます。質問ボックスにコードブロックがあるんですね。慣れておらず、申し訳ございません。ただいま、修正させていただきます。
Lhankor_Mhy

2018/11/08 07:53

試してみたところ、相殺が起きませんでした。おかしいな、と思ってソースコードを見たところ、全角スペースが混じっています。あと、属性の閉じ忘れがあります。
bah91929

2018/11/08 08:08

ご回答ありがとうございます。ドリームウィーバーのソースコードをコピペした際に全角や属性の閉じ忘れがあったのかと存じます。失礼しました。
guest

回答3

0

ベストアンサー

考えている通りmarginの相殺です

解決策としては

  1. 子要素のmargin文を親要素にpaddingとして付ける(←これがベスト)
  2. 親要素と子要素の間にテキストなどを挟む
  3. 親要素にborderを付ける
  4. 親要素にoverfrow:hidden;を付ける
  5. flexboxやgridレイアウトにする

1,2,3,は何をしているのかというと、
子要素のmaginと親要素のmaginの間に何かを挟んでいるという事です

4ははみ出した部分を非表示にしています

5は対策になると聞いたことがありますが試したことがありません

追記(質問2について)

解決策5ですね
.rowのdisplay: flex;を消してみると症状が出ます
追記2

簡単にいうとmarginの相殺はブロックの要素に起きるからです

margin: 0 auto;の中央寄せはインラインの要素には効かないのと似た理由と思えばいかがでしょうか?

marginの相殺はブロックの要素に起きるので
ブロックの要素ではないflexboxでは起きません

他にもtableもブロックではないので起きないかもしれませんね(未検証)

解決策2に関して

「2. 親要素と子要素の間にテキストなどを挟む」
そこの挟むものは「タグ」ではなく「テキスト」です
pタグはブロックの要素ですが、「テキスト」はブロックの要素ではないですよね?
空のプロックの要素はいくら挟んでも駄目なのはbah91929自身で検証されてますので理解されてますよね

そのpタグの中のテキストを全て削除するとmarginの相殺が起きるはずです
ちなみに「など」がさしてるものは例えばborderです
他にもあるかもしれないので「など」と括ってます

「子要素のmaginと親要素のmaginの間に何かを挟んでいるという事です」も勘違いしないように説明しますが、子要素にborderを付けても駄目です
borderがその要素のどこに付くのかは分かりますか?

marginの内側です

なのでそれは「子要素のmaginと親要素のmaginの間」と違うからです
つまりborderを付けるべきなのは親要素というわけです。

投稿2018/11/08 06:56

編集2018/11/09 02:51
akihiro3

総合スコア955

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

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

bah91929

2018/11/08 07:19

早速のご返信まことにありがとうございます。 コードの相殺なんですね。 コードの相殺ならば「2つ目の質問は、<div class="div_width">にmargin-top:100px;をかけると、親要素<div class="midashi_bg10">や<div class="container2 align="center">や<div class="row row-div_width">は余白ができず、<div class="div_width">だけmargin-top:100px;が効くのでしょうか?」 こちらはなぜコードの相殺が起きていないのでしょうか?(または起きているけど気づいていないのでしょうか?) 大変お手数ではございますが、ご教授くださいますと幸いでございます。
akihiro3

2018/11/08 07:41

追記しました。
bah91929

2018/11/08 07:52

迅速なご回答感謝いたします。 display: flex;をつけていたのを失念しておりました^^; display: flex;でmarginの相殺が回避できることご教授ありがとうございます。 重ねてのご質問で大変恐縮ですが、なぜdisplay: flex;でmarginの相殺が回避できるのでしょうか? 理屈を知っていたほうが応用が効くのかなと思い、質問させていただきました。 お手数ではございますが、可能であればご回答の程お待ち申し上げております。
akihiro3

2018/11/08 08:51

追記しました。
bah91929

2018/11/09 02:08 編集

非常に分かりやすい解説ありがとうございます! 今回の質問事項は解決しました。 後ほどベストアンサーにさせていただきます(^^) ご教授くださった方法を1つずつ実験して理解しているところですが、 「2.親要素と子要素の間にテキストなどを挟む」でmarginの相殺が回避できる理由が分かりません(marginの回避には成功します)。 <p>テキストテキスト</p>でコードを差し込んだとしても、pタグはブロック要素なのでmarginの相殺が起きるはずなのに起きないのはなぜなのか、教えていただけますと幸いです。 すでにたくさんご教授くださってますので、可能であればよろしくお願いします。
akihiro3

2018/11/09 02:52

解決して良かったです pタグの件は「2.親要素と子要素の間にテキストなどを挟む」の意味そのままです。 日本語って難しいですね・・・ 追記しておきます
bah91929

2018/11/09 04:36

本当に迅速で完璧なご回答ありがとうございます! 理解しました! この度は本当にお世話になりました(^^)
guest

0

仕様としてはこれですかね。
ボックスモデル

overflow:hidden display:flexだと相殺しない理由は、↓ここかもです。

新しいブロック整形コンテキスト(たとえば、'visible'以外の'overflow'の浮動体や要素など)を設置する要素のマージンは、そのフロー内の子とともに相殺しない。

ボックスモデル

 

次のうちのいずれかにより、ブロック整形文脈が作られます:

(略)
・overflow が visible 以外である要素
・フレックスボックス(display が flex または inline-flex である要素)
ブロック整形文脈 - CSS: カスケーディングスタイルシート | MDN

その他、ボーダーやパディングが親にある時も相殺しないようですね。

行ボックス、クリアランス、パディングおよびボーダーのないものを区別する

ボックスモデル

投稿2018/11/08 08:15

編集2018/11/08 08:32
Lhankor_Mhy

総合スコア35865

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

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

bah91929

2018/11/09 04:39

ご教授ありがとうございます。 リンク先の文章も合わせて拝読いたします!
guest

0

https://qiita.com/mochizukikotaro/items/53eea34bcd644daddd44

おそらくこちらのサイトに書いてあることで解決できるのでは、と思います。

投稿2018/11/08 05:37

azuapricot

総合スコア2341

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

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

bah91929

2018/11/08 07:25

参考サイトのご提示ありがとうございます。 拝読いたします!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問