思った通りにうごいてくれません・・・
▼ おーぷん ▼
divを2つ作って内側divを外側divの中で中心に配置したくて、
外側を600*400pxにして
marginを5%全方向に、widthとheightを90%にしてます
上右下左のmarginが30px,20px,30px,20pxとなって内側が540*360となるのを期待したんですが
こうなりました
なんか上のほうが大きく下が小さくなっていて中央に来てないです
Chromeの要素の検証から詳細を見てみると
縦横で長さが違うはずなのに全部統一で30px
30pxというと横のmarginの期待する値
長いほうが優先なのかと思って外側のdivのwidthとheightを逆にしてみる
結果は
今度は上marginが小さい
全方向が20pxです
長い方に合わされるのじゃなくてwidthに合わされるようです
marginじゃなくpaddingでも親のwidthに合わされます
どうしてここだけ親要素を引き継いでくれないの!
この場合は、
margin:20px 30px;
margin:30px 20px;
とか書けばいいだけなんですが
外側もパーセント指定されてることが多いのでピクセル指定はしたくないんです
とりあえず
あんまりpositionを使いたくないんだよなー…
こんなHTMLを用意<head><style>body{background:lightcyan;}#a{width:600px;height:400px;background:silver;margin:auto;border:1px solid black; /* 相殺無効 */}#b{margin:5%;width:90%;height:90%;background:white;}</style></head><body><div id="a"><div id="b"></div></div></body>
外側を600*400pxにして
marginを5%全方向に、widthとheightを90%にしてます
上右下左のmarginが30px,20px,30px,20pxとなって内側が540*360となるのを期待したんですが
こうなりました
なんか上のほうが大きく下が小さくなっていて中央に来てないです
Chromeの要素の検証から詳細を見てみると
縦横で長さが違うはずなのに全部統一で30px
30pxというと横のmarginの期待する値
長いほうが優先なのかと思って外側のdivのwidthとheightを逆にしてみる
#a{width:400px;height:600px;background:silver;margin:auto;border:1px solid black; /* 相殺無効 */}
結果は
今度は上marginが小さい
全方向が20pxです
長い方に合わされるのじゃなくてwidthに合わされるようです
marginじゃなくpaddingでも親のwidthに合わされます
どうしてここだけ親要素を引き継いでくれないの!
この場合は、
margin:20px 30px;
margin:30px 20px;
とか書けばいいだけなんですが
外側もパーセント指定されてることが多いのでピクセル指定はしたくないんです
とりあえず
こうするとことでパーセント指定使って解決<head><style>body{background:lightcyan;}#a{width:600px;height:400px;background:silver;margin:auto;position:relative;}#b{width:90%;height:90%;background:white;position:absolute;left:5%;top:5%;}</style></head><body><div id="a"><div id="b"></div></div></body>
あんまりpositionを使いたくないんだよなー…
▲ くろーず ▲