- ベストアンサー
CSSでのブロック要素に囲み線
下記、記述では#lineと#headerがぴったり重なると思うのですが、ブロック要素（#lineの部分）にborderを設定するとマージンができてしまうのですが、なぜでしょうか？border部分を削除するとぴったり重なります。 <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <style type="text/css" media="screen"><!-- #line { background-color:yellow;border:1px solid #808080;} #header { background-color:#23819e;text-align:center;} --></style> </head> <body> <div id="line"> <div id="header"> <p>aaa</p> </div> </div> </body> </html>
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
pにmarginがあるから。 試しに p { margin: 0;} を入れてみてください。 希望通りのデザインにするにはブラウザーがデフォルトで持っているpaddingとmarginは0にします。 ですが * {padding:0; margin:0;} はお勧めしません。必要なものだけイニシャライズしてください。
その他の回答 (2)
- xs200
- ベストアンサー率47% (559/1173)
??? #header { background-color:#23819e;text-align:center;} を #header { background-color:#23819e;text-align:center;padding: 2em;} とかにすればいいだけだと思うのですが、質問の内容がよく理解できていないようです。私はゼロにリセットしてから必要なところにpadding, marginをつけていくので難しい理屈は考えません。
お礼
ありがとうございます。理屈など考えずに、できるような形でやってみます。
- salonpath
- ベストアンサー率48% (194/399)
http://www.w3.org/TR/CSS2/box.html#collapsing-margins そうゆう仕様みたいですよ 親要素にpaddingかborderが無ければ子要素のmarginはつぶされて、paddingかborderがあればmarginはつぶされない >In CSS 2.1, horizontal margins never collapse. 左右のmarginは対象外
補足
ありがとうございます。paddingかborder～という仕様であれば、仕方ありませんね。ただ、マージンが発生するのは仕方ないとしても、そのマージンを直の親要素につけたいのですが、どのように記述すればよいのでしょう？ この場合は#headerの青にしたいのですが、p要素にbackground-colorを設定しても、#headerにマージンをつけたような状態になります。（上下）
補足
ありがとうございます。確かにmargin:0;だと重なりますが、本来、P要素のマージンであれは、親要素である#headerがマージンの分大きくなるのではないのでしょうか？#headerの方にP要素のデフォルトに該当するpaddingを設定すればよいのでしょうか？