こんなお悩みに
marginを指定したら、背景もろとも余白が生まれて思い通りに設定できない
子要素にmargin指定したのに、親要素が子離れしないでついてくる
親要素のcssにoverflow: hidden;で解決
親要素と子要素を設置
index.html
<body><divclass="box1"><divclass="box2"></div></div></body>style.css
.box1{width:400px;height:400px;background-color:#bae8e8;}.box2{width:200px;height:200px;background-color:#ffd803;}子要素にmarginを追加
親要素からの余白が欲しいので、marginを設定します
style.css
.box2{###margin:50px;###}すると
オーマイガー;ﾟдﾟ)
親要素の淵からの余白が欲しかったものの、仕様なのか、縦の余白は親要素の外側に適用される
親要素にoverflow: hidden;を指定
style.css
.box1{###overflow:hidden;###}すると
思い通りの結果に
プログラミング初心者です。
ログイン画面のレイアウト作成中、ログインフォームのボックスにmarginを指定したら、背景のスタイルが崩れてしまい、なかなか思い通りに余白が設定できなかったので、今回はその覚書きとしました。
参考
・親要素からはみ出してmarginが適用される対策
・CSSリファレンス overflow …… はみ出た要素の表示方法を指定する
サンプルコード
index.html
<!DOCTYPE html><html><head><title>Overflow</title><linkrel="stylesheet"type="text/css"href="style.css"></head><body><divclass="box1"><divclass="box2"></div></div></body></html>style.css
*{margin:0;padding:0;box-sizing:border-box;}body{background-color:#e3f6f5;}.box1{width:400px;height:400px;background-color:#bae8e8;/*親要素に追加*/overflow:hidden;}.box2{width:200px;height:200px;background-color:#ffd803;/*子要素に追加*/margin:50px;}ちなみに、親要素にテキストが含まれていたりmarginやpaddingが指定されていると、overflow: hidden;を指定しなくても余白がはみ出ることはないみたいです。
style.css
.box1{width:400px;height:400px;background-color:#bae8e8;/* overflowの指定なし*/}.box2{width:200px;height:200px;background-color:#ffd803;margin:50px;}