Q&A
へ～。IE ももう捨てちゃって良さそうなので、普通に使えそうですね。勉強になります
https://caniuse.com/flow-root
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <link rel="stylesheet" href="style.css"> 6 <title>Document</title> 7</head> 8<body> 9 <div class="main"> 10 <div class="box1"></div> 11 </div> 12</body> 13</html>
CSS
1.main { 2 width: 600px; 3 height: 300px; 4 background-color: pink; 5 border-radius: 20px; 6} 7 8.box1 { 9 width: 500px; 10 height: 200px; 11 background-color: white; 12 border-radius: 20px; 13 margin-left: auto; 14 margin-right: auto; 15 margin-top: 30px; 16}
上記のような画像をHTMLとCSSを用いて作りたいのですが、自分でやってみたのですが上手くいきません。
上記のコードをやってみると下記のような画像になります。
.box1に対してmargin-topを設定する事で、余白ができるのかなと思ったのですが、効かないです。
この原因とどうしたら完成形になるか教えて欲しいです。
回答2件
0
親要素(.main)にpaddingやborderが無い状態でmargin-topをつけるとmargin-topが突き抜けます。
css
1.main { 2 width: 600px; 3 height: 300px; 4 background-color: pink; 5 border-radius: 20px; 6 padding-top: 1px;/*追加*/ 7}
とすれば突き抜けません。
逆に.boxのmargin-top: 30px;を削除して、.mainにpadding-top: 30pxとしても良いかもしれません。
投稿2021/08/03 13:36
編集2021/08/03 13:37
総合スコア1293
0
ベストアンサー
親子間マージン相殺が原因です。
解決方法ですが、CSS3的にはブロック整形コンテキストを生成するのがスマートです。
いろいろな方法がありますが、display: flow-rootが副作用がないので使いやすいです。
css
1.main { 2 width: 600px; 3 height: 300px; 4 background-color: pink; 5 border-radius: 20px; 6 display: flow-root; /* 追加 */ 7}
投稿2021/08/04 00:34
総合スコア36134
IE11対応を考えると overflow: auto がいいんでしょうけど、副作用がありますからね……
column-count: 1 も副作用がなさそうな気がするんですが、試したことがないです。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。