Q&A
前提・実現したいこと
headerタグ内でh1にmargin-topを効かせたい
発生している問題・エラーメッセージ
headerタグ内にあるh1にmarginを指定したのですが、左は効くのに上には効きません。
色々試してみたのですが原因が分からずかなり悩んでいます。
ご教授よろしくお願い致します。
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <link rel="stylesheet" href="../css/style.css"> 6 <title>Document</title> 7</head> 8<body> 9 10 <header> 11 <div> 12 <h1>ぶらりタイ飯珍道中</h1> 13 </div> 14 </header> 15 16</body> 17</html>
css
1@charset "utf-8"; 2 3header { 4 height: 80px; 5 width: 800px; 6 background-color: lightcoral; 7} 8 9h1 { 10 height: 50px; 11 width: 300px; 12 background-color: mediumaquamarine; 13 margin: 10px 0 0 50px; 14} 15
試したこと
色々試した中で、headerにcssでborder-top:1px solid #000;と指定すると、h1にmarginは効きます。
でもそれが何故か理由が分からないのがスッキリしないので、今回質問させて頂きました。
回答2件
0
マージンの相殺 - CSS: カスケーディングスタイルシート | MDN
親と子孫を隔てるコンテンツがない場合
あるブロックの margin-top と、1つ以上の子孫ブロックの margin-top を隔てる境界、パディング、インライン部分、 ブロック整形コンテキストの生成、浮動の解除 (clear) のいずれもがない場合、もしくは、あるブロックの margin-bottom と1つ以上の子孫ブロックの margin-bottom を隔て境界、パディング、インラインコンテンツ、 height, min-height, max-height のいずれもがない場合、それぞれマージンが折り畳まれます。折り畳まれた側のマージンは、親要素の外側に出ます。
投稿2021/08/22 14:46
総合スコア11992
0
マージンの相殺と言われているやつですね。
投稿2021/08/22 14:47
総合スコア509
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。