ベストアンサー

CSSでのブロック要素に囲み線

2009/07/24 13:11

下記、記述では#lineと#headerがぴったり重なると思うのですが、ブロック要素（#lineの部分）にborderを設定するとマージンができてしまうのですが、なぜでしょうか？border部分を削除するとぴったり重なります。 <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <style type="text/css" media="screen"></style> </head> <body> <div id="line"> <div id="header"> <p>aaa</p> </div> </div> </body> </html>

rootster
お礼率75% (180/239)

HTML
回答数3
ありがとう数1

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

xs200
ベストアンサー率47% (559/1173)

2009/07/24 14:11 回答No.1

pにmarginがあるから。試しに p { margin: 0;} を入れてみてください。希望通りのデザインにするにはブラウザーがデフォルトで持っているpaddingとmarginは0にします。ですが * {padding:0; margin:0;} はお勧めしません。必要なものだけイニシャライズしてください。

質問者

補足 2009/07/24 14:27

ありがとうございます。確かにmargin:0;だと重なりますが、本来、P要素のマージンであれは、親要素である#headerがマージンの分大きくなるのではないのでしょうか？#headerの方にP要素のデフォルトに該当するpaddingを設定すればよいのでしょうか？

その他の回答 (2)

xs200
ベストアンサー率47% (559/1173)

2009/07/24 17:08 回答No.3

??? #header { background-color:#23819e;text-align:center;} を #header { background-color:#23819e;text-align:center;padding: 2em;} とかにすればいいだけだと思うのですが、質問の内容がよく理解できていないようです。私はゼロにリセットしてから必要なところにpadding, marginをつけていくので難しい理屈は考えません。

質問者

お礼 2009/07/24 22:52

ありがとうございます。理屈など考えずに、できるような形でやってみます。

salonpath
ベストアンサー率48% (194/399)

2009/07/24 14:19 回答No.2

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は対象外

質問者

補足 2009/07/24 14:46

ありがとうございます。paddingかborder～という仕様であれば、仕方ありませんね。ただ、マージンが発生するのは仕方ないとしても、そのマージンを直の親要素につけたいのですが、どのように記述すればよいのでしょう？この場合は#headerの青にしたいのですが、p要素にbackground-colorを設定しても、#headerにマージンをつけたような状態になります。（上下）

関連するQ&A

CSSが悪いんでしょうか？
下記ソースをIE6で見ていただくとわかりますが、ナビ部分にカーソルをもっていくと、footerの背景が伸びたり縮んだりします。 IE6だけでこのような現象が出ています。 ※手元のデータは外部リンクです。 -----ソース----- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <style type="text/css"> body {background: #EFEFEF;} #wrapper{background: #fff; padding: 0; width: 700px; line-height: 1.4em;} #header{border: 3px solid #333;} #nav{float: left; width: 150px;} #nav ul{margin:0; padding:0; list-style-type:none;} #nav li a{display:block; width:150px; margin:0 0 1px 0; background-color:#CCC;} #nav li a:hover{background-color:#FF9900; color:#000000;} #rightbox{padding:0 5px; width: 140px;} #main{border:4px solid #FF0000; float: right; width: 542px;} #footer{background-color:#CCC; clear: both;} </style> <title>test</title> </head> <body> <div id="wrapper"> <div id="header"> <h1>header</h1> </div> <div id="nav"> <ul> <li><a href="#">nav1</a></li> <li><a href="#">nav2</a></li> <li><a href="#">nav3</a></li> </ul> </div> <div id="main"> <h2>main</h2> <p>本文</p> <p>本文</p> <p>本文</p> <p>本文</p> <p>本文</p> <p>本文</p> <p>本文</p> </div> <div id="footer"> footer </div> </div> </body> </html>
- ベストアンサー
- HTML
枠線でメイン部分を囲み、フッターを一番下にもってくるには？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <style type="text/css">  </style></head> <body> <div id="flame"> <div id="header">ヘッダー</div> <div id="content_right">メイン記事テキスト</div> <div id="left">左メニュー部分</div> </div> <div id="footer">フッター</div> </body> </html>
- ベストアンサー
- HTML
CSSがうまく読み込まれません
いつもお世話になっています。 Dreamweaver CS4でホームページ作りをしているのですが、突然CSSが読み込まれなくなりました。 htmlのソースは <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>無題ドキュメント</title> <link href="CSS/test.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="1"> <p>1</p> </div> <div id="2"> <p>2</p> </div> <div id="3"> <p>3</p> </div> <div id="4"> <p>4</p> </div> <div id="5"> <p>5</p> </div> </body> </html> cssのソースは body { padding: 20px; width: 850px; margin-right: auto; margin-left: auto; border: 1px solid #999; } #1 { width: 850px; background-color: #666; } #2 { width: 850px; background-color: #999; } #3 { background-color: #CCC; width: 850px; } #4 { background-color: #999; width: 850px; } #5 { background-color: #666; width: 850px; } です。どちらもエンコーディングはUTF-8です。ちなみにDreamweaverで制作中の表示ではCSSは反映されているのですが、プレビューまたはサーバーにアップすると反映されません。なにが原因なのでしょう。。。何卒よろしくお願いいたします。
- ベストアンサー
- HTML
cssでの要素間の余白について。
ホームページを作成しており、画像の下にdivをくっつけて、配置したいのですが、どうやっても、余白が出来てしまいます。styleでdiv要素にmargin-bottom:0、h2にmargin-top:0と記述しても、余白が出来てしまい、困っています。さらにdiv containerの大きさについても、styleでwidth,heightで、大きさを指定しているのですが、横に画面一杯に広がってしまい、大きさ指定が反映されません。初歩的な質問かもしれませんが、どこに問題がありますでしょうか？ご教授お願いいたします。 "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html;charset=Shift_JIS"/> <title>xxxxxxxxxxxxxx</title> <style type="text/css"> body {background-color:#f5f5f5} div#container {width="800" height="40";background-color:#fff4d8} h1 {color:#330000;font-family:Geogia,Times New Roman,sans-selif} h2 {color:#330000;font-family:Geogia,Times New Roman,sans-selif;margin-top:0} </style> </head> <body> <div id="content"> <h1><img src="xxxxxx.jpg" alt="xxxxxxxxx" </h1> </div> <div id="container"> <h2> xxxxxxxx </h2> </div> </body> </html>
- ベストアンサー
- CSS
ブロックレベル要素内ブロックレベル要素のmargin-topが効かない
<html><head><style> *{ margin:0; paddgin:0; border:none; } div#wrap{ background:#BBB; width:600px; height:900px; margin:30px auto; } div#header{ background:#999; width:150px; height:60px; margin:30px; } </style></head><body> <div id="wrap"> <div id="header"> </div> </div> </body></html> 例えばこの用な場合で、divの中にdivが入っている場合など…中に入っているdiv要素のmargin-topが効きません。原因がよくわらないのですが、どのような条件の時にmargin-topは効かなくなるのでしょうか？また解決策はどのようなものがあるでしょうか？このようなケースでmargin-topが効かなくなったのが二度目でどうしても気になったので質問させていただきました。よろしくお願いします。
- ベストアンサー
- HTML
CSSーfloatについて
divの中にp要素を三つ作成して、最初のp要素にfloat:leftを指定しました。結果MacIEとIE6では2番目のpのみ右に並び、3番目のpは1番目のpの下にある状態です。しかも、FirefoxやSafari・Operaでは3つとも縦に並んだままです。単純なミスのようなきがするんですが解決できません。どなたか助けてください。よろしくお願いします。以下のコードです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>無題ドキュメント</title> <style type="text/css">  </style> </head> <body> <div id="box"> <p id="A">AAA</p> <p id="B">BBB</p> <p id="C">CCC</p> </div> </body> </html>
- ベストアンサー
- その他（プログラミング・開発）
CSSが正確に反映されません。
４つの枠を丸で囲み、かつそれぞれの枠を等間隔で空けたいと思います丁度以下の2つを表示した場合の、contentsとmainの間の間隔が理想的です。しかし書いたCSSの設定が正確に反映されません。 headerとfooterもこの大きさで広げたいと思うのですが、広がりません。また、なぜheaderは丸くならず、footerはサイズからはみ出すのでしょうか。背景を赤に設定しているのですが、それも反映されません。なぜこうなるのかどなたかご存知の方、ご指摘いただけると助かります。どうかよろしくお願いします。以下、2つのファイルは同じフォルダに保存しました。 dreamweaverのアカデミック版で作り、firefox3.6.13で表示しています。 style.css ---------------------------------------------------------- @charset "utf-8"; /* CSS Document */  body { background-color: red; }  #wrapper, #main, #header, #menu, #footer { width:1120px; }  #header, #menu, #contents, #footer { background-color: #66FFFF; border:2px solid #999; padding: 8px; margin-bottom:5px; -webkit-border-radius: 5px; /* Safari,Google Chrome用 */ -moz-border-radius: 5px; /* Firefox用 */ }  #wrapper { margin: 0 auto; line-height: 1.5; } #main { } #header { height: 50px; } #menu { width: 160px; float: left; } #menu ul { list-style: none; margin-left: 1em; } #contents { float: right; width: 900px; } #footer { clear: both; height: 50px; text-align: center; } --> ------------------------------------------------------------------------------------ index.html ------------------------------------------------------------------------------------ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"><head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>勉強用</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="wrapper"> <div id="header"> <h1>Site Title</h1> </div> <div id="main"> <div id="menu"> <p><strong>float:left</strong></p> <ul> <li>Menu</li> <li>Menu</li> </ul> </div> <div id="contents"> <h2>Sub Title</h2> <p><strong>float:left</strong></p> <h2>Sub Title</h2> <p>text</p> </div> </div> <div id="footer"> <p>Footer</p> </div> </div> </body> </html>
- 締切済み
- CSS
枠線でメイン部分を囲み、フッターを一番下にもってくるには？
お世話になります。標準モードで1pxの枠線を作り、一番下にフッターがくるようにしたいのですが、どうにも出来ません。また、左メニューとメインの部分がズレてしまう事も修復できず悩んでいます。なにかいい方法がないか、ご教授いただけると幸いです。尚、テーブルは使わない方法でお願いします。以下が途中までのソースです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <style type="text/css">  </style></head> <body> <div id="flame"> <div id="header">ヘッダー</div> <div id="content_right">メイン記事テキスト</div> <div id="left">左メニュー部分</div> </div> <div id="footer">フッター</div> </body> </html>
- ベストアンサー
- HTML
CSSでの質問です
初めて段組を作ってみたんですが、上の余白を無くするにはどうしたらいいのでしょうか？ソースは以下のとおりです。 <style type="text/css">  </style> </head> <body> <div id="wrapper"> <div id="header"></div> <div id="primary"> </div> <div id="secondary"> </div> <div id="footer"></div> </div> </body> </html> センタリングを維持したまま上の余白をクリアしたいのですが、何か解消法はありますか？
- 締切済み
- HTML
DreamWeaverでテーブルをCSSにした場合にずれます。
DreamWeaverを使い始めました。 CSSの段組左にテーブルを入れると下記のようになりました。 ----------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <style type="text/css">  </style> </head> <body> <div id="wrap"> <div id="content"> <table width="200px" border="0" cellspacing="0" cellpadding="0"> <tr> <td>1段</td> </tr> <tr> <td>2段</td> </tr> </table> </div> <div id="main">メインメインメインメインメイン</div> <div id="footer"> 下</div> </div> </body> </html> -----↑ここまでDreamWeaver そこで、CSSでテーブルにボーダー0の値を入れて、タグからborder="0"を消すと、段組右側が左の下にずれて表示されます。ブラウザプレビューでは正常ですが、編集しにくくて困ってます。 table { border: none; border-collapse: collapse; } DWでは、このようになるものなのでしょうか。
- ベストアンサー
- HTML

CSSでのブロック要素に囲み線