Q&A
overflow: hidden;を使えばよかったのですね。
教えていただきありがとうございます。
Bootstrapで、子要素に付けたy方向のmarginが思うように効きません。
子要素のクラス名にmt-3と指定しました。僕としては親要素と子要素の間にmt－3が欲しいのですが、
結果は親要素の外側にmt-3が来てしまいます。
その原因を教えていただきたいです。
※コードの中身に関して。headタグ内のその他の設定は、見やすさ重視の観点からここでは記載していませんが、もしも必要でしたら
後ほど添付します。
HTML
1<head> 2<style> 3 .box-container{ 4 height: 100px; 5 width: 100px; 6 margin: 2px; 7 background-color:#ddd; 8 } 9</style> 10 </head> 11 <body> 12 <div class="box-container "> 13 <div class="bg-danger w-50 h-5 ml-4 mt-3">box</div> 14 </div> 15</body>
回答2件
0
ベストアンサー
こんにちは。
親子間のマージン相殺が起きています。
対策としては、ブロック整形コンテキストを生成するのが楽です。
css
1 .box-container{ 2 height: 100px; 3 width: 100px; 4 margin: 2px; 5 background-color:#ddd; 6 display: flow-root; 7 }
参考：
親と子孫を隔てるコンテンツがない場合 | マージンの相殺 - CSS: カスケーディングスタイルシート | MDN
ブロック整形コンテキスト - 開発者ガイド | MDN
投稿2021/01/14 08:10
総合スコア36960
0
marginの仕様なので、親要素にborder(やmarginやpadding)を指定するか、overflow: hidden;を指定してください。
CSS
1.box-container{ 2 overflow: hidden; 3 (略) 4}
投稿2021/01/14 08:10
編集2021/01/14 08:12
総合スコア11990
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/01/14 08:50