css で二重の四角を作る
◆ 内側要素に margin ? それとも 外側要素に padding ?
◆ margin は縦方向が難しい
◆ margin 相殺という余計な機能も邪魔
◆ 外側 padding するのが安定だと思う
◆ margin は縦方向が難しい
◆ margin 相殺という余計な機能も邪魔
◆ 外側 padding するのが安定だと思う
→
のような二重の四角つくることはCSSでよくあります
外側の大きさが 100px のような絶対値じゃなくて 100% のような相対値で決まっていると内側の大きさを決めるためには 外側に padding をつけて空間を取って 内側の大きさで 100% とするしかないと思ってました
ですが 内側に margin つけて width を指定しない (auto を指定する) と 自動で幅いっぱいまで広がるので 横幅はこれでもできました
よく考えると そうなんですがめったに使わないし width は毎回 100% か固定値指定してたので気づいてませんでした
これで行けるかと思ったのですが 高さは 自動では広がらないですし margin を内側につけても 外側に border や overflow が設定されていないと margin が外側の要素の外につけられるという謎挙動しますし margin はやっぱり使わない方がよさそうです
外側要素 padding が安定です
のような二重の四角つくることはCSSでよくあります
外側の大きさが 100px のような絶対値じゃなくて 100% のような相対値で決まっていると内側の大きさを決めるためには 外側に padding をつけて空間を取って 内側の大きさで 100% とするしかないと思ってました
ですが 内側に margin つけて width を指定しない (auto を指定する) と 自動で幅いっぱいまで広がるので 横幅はこれでもできました
よく考えると そうなんですがめったに使わないし width は毎回 100% か固定値指定してたので気づいてませんでした
これで行けるかと思ったのですが 高さは 自動では広がらないですし margin を内側につけても 外側に border や overflow が設定されていないと margin が外側の要素の外につけられるという謎挙動しますし margin はやっぱり使わない方がよさそうです
外側要素 padding が安定です