divによるボックスの意図しないマージンについて
- divによるボックスを作る際に意図しないマージンができてしまう問題について質問します。
- cssの適用方法やmarginプロパティの設定に関して調べたが、解決策が見つからない状況です。
- センター揃えにするためにwidthとmargin-left、margin-rightの設定をしているが、予期しないマージンが発生しています。
- ベストアンサー
divによるボックスの意図しないマージンについて
divによるボックスの意図しないマージンについて質問致します。 よろしくお願いしますm(_ _)m 現在cssによるデザインを勉強中なのですが、「div」によるボックスを作り、センター揃えにして上下に並べようとしたら画像の矢印のような意図しないマージンができてしまいました。 divへのcssの適用の仕方がまだしっかりとわからず手探り状態で、調べてもよくわからなかったです・・・。 margin-bottom:0pxなどでもダメでした・・・。 どうか原因がわかる方がいましたらよろしくお願いします(>_<) この場合に適用しているcssは ・width:○○ ・margin-left:auto; ・margin-right:auto; だけです。 どうかよろしくお願いしますm(_ _)m
- dream_pop
- お礼率100% (7/7)
- CSS
- 回答数4
- ありがとう数5
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
ふたつのdivが並ぶ場合、中に何もないと密着します。 <body> <div class="header"> </div> <div class="cection"> </div> <div class="footer"> </div> にて、 html,body{margin:0;padding:0;} div.header,div.cection,div.footer{margin:0 auto;width:70%;} div.header,div.footer{height:100px;background-color:yellow;} div.cection{height:400px;background-color:silver} ここで、それぞれのdiv内に<h1>や<p>を入れると隙間が広がります。また、それぞれのdivにborderを div{border:solid red 1px;} 指定すると、面白いです。 そこで、 div.header *:first-child,div.section *:first-child,div.footer *:first-child{margin-top:0;} と指定すると、・・・ div要素にある要素のマージンが突き抜けて、相手の要素内にある要素との間にmarginが働く。 これは、floatさせたとき、その要素がもつmarginが、テキストやボックスを跳ね除けるのと同じです。
その他の回答 (3)
- tsuki11
- ベストアンサー率50% (43/86)
修正方法はお任せするとして。 cssだけじゃなく、htmlソースも書いたほうがいいです。 cssもスタイルシートにしてるのかどうか、とかも。 (自分では気づかないうちに、他のcssが影響してる場合もあるし) じゃないと適切なアドバイスがしにくいですよー。
お礼
回答ありがとうございました！ どこかで設定が足りていない部分がないか確認してみます！
補足
<div>には外部ファイルからclassで設定しています。 上のボックスに対しては高さと幅の両方を固定していたんですが、下のボックスは高さは指定せず<p>を入れて並べたらマージンが開いてしまいました。
- naokita
- ベストアンサー率57% (1008/1745)
色々試すと良いでしょう。 <div style="background:red;"> <p>ボックス</p> </div> <div style="background:red;"> <p>ボックス</p> </div> <div style="background:red;"> <p style="margin: 0;">ボックス</p> </div> <div style="background:red;"> <p style="margin: 0;">ボックス</p> </div> <div style="background:red; border:1px solid red;"> <p>ボックス</p> </div> <div style="background:red; border:1px solid red;"> <p>ボックス</p> </div>
お礼
回答ありがとうございました！ 試行錯誤してみます！
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2281)
<div> <p>ボックス</p> </div> となっている場合、divのマージンが0でも、pにマージンがあればそのマージンが空くことになります。 確認してみてください。
お礼
回答ありがとうございました！ 実際divの中に<p>が入っていましたが、どうやらそのマージンが影響を及ぼしているわけではないようでした・・・。 しかし、中のマージンなどが影響を及ぼすということは勉強になりました！ ありがとうございました！！！
関連するQ&A
- 外側のdivの高さを入れ子のdivの高さに自動的に合わせたい
外側のdivの高さを入れ子のdivの高さに自動的に合わせたい 添付画像のようなコンテンツを作成しています。 外側のdiv(contents_box）内にcontents_imgとcontents_textのdivを配置しています。 このcontents_imgとcontents_textの高さに合わせて外側のcontents_boxも自動的に変動させたいのですが、どのようにしたら良いのでしょう？ 高さをautoですとただの棒のようになってしまい、ダメでした。 どうぞよろしくお願い致します。 xhtml <div id="contents_box"> <div id="contents_img">ここに画像</div> <div id="contents_text"> ここにテキスト</div> </div> css #contents_box { height: auto; width: 805px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #333; } #contents_img { height: auto; width: 300px; margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 0px; float: left; } #contents_text { height: auto; width: 485px; margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 10px; float: right; text-align: justify; }
- ベストアンサー
- HTML
- FireFoxで見るとdiv間に隙間が・・・
divを３つ使い、CSSで指定した背景画像によって一つのボックスを作っています。 ＩＥ６で見たときは異常ないのですが、FireFoxで見ると、 それぞれ隙間が開いてしまい、背景画像が途切れて見えます。 同じような使い方をしている箇所にすべて同じ事が起きています。 Firefoxではマージン0の状態でdivの間に隙間が出来てしまうのでしょうか？ 直す方法があればご指導よろしくお願い致します＞＜ <div id="medi-top"> </div> <div id="media"> <p>何行かにわたり、画像や文章が入力されています</p> </div> <div id="medi-bottom"></div> #medi-top { background-image: url(img/media_01.jpg); background-repeat: no-repeat; height: 50px; width: 680px; margin-top: auto; margin-right: auto; margin-bottom: 0px; margin-left: auto; line-height: 0; } #media { width: 600px; background-image: url(img/media_03.jpg); background-repeat: repeat-y; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding-right: 40px; padding-left: 40px; } #medi-bottom { background-image: url(img/media_05.jpg); background-repeat: no-repeat; height: 35px; width: 680px; margin-top: 0px; margin-right: auto; margin-bottom: 50px; margin-left: auto; } 本や検索などで同じようなものを探して対処してみたのですが、 直らなかったため質問させていただきます。 よろしくお願い致します。
- ベストアンサー
- CSS
- IEでだけ1つのDivがずれる。
現在スタイルシートを使ってレイアウトをしているのですが、 なぜかIEだけ一部のDIVのセンタリングがうまくいきません。 ヘッダー、メニューは共に中央揃えなのですが、その下のメインDIVのみ 10pxくらいだけ左側にずれます。Firefoxではきちんと揃って表示されています。 色々試したのですがどうしても解決方がわかりません。よろしくお願いします。 css body{ text-align: center; margin-top: 0px; margin-bottom: 0px; margin-left: auto; margin-right: auto; padding: 0px; } #header{ display: box; margin: 0px; padding: 10px 0px 15px 0px; background-image: url(header.gif); background-repeat: repeat-x; background-position: center bottom; } #header div{ width: 780px; display: box; margin-top: 0px; margin-bottom: 0px; margin-left: auto; margin-right: auto; padding:0px; } #menu { clear: both; margin: 0px; padding: 0px; background-image: url(menu-bg.gif); background-repeat: repeat-x; height: 50px; } .main{ clear: both; margin: 0px auto 0px auto; padding:0px; text-align: left; width: 780px; bottom: 0px; } #menu ul{ width: 780px; margin: 0px auto 0px auto; padding: 0px; height: 50px; overflow: hidden; } ヘッダー、メニュー共に、背景画像を画面いっぱい横並びにしたいため その内の要素のみをセンターに寄せる形にしています。 htmlでは上記のdiv(ヘッダー・メニュー・メイン)を縦に三つ並べています。
- ベストアンサー
- HTML
- 【スマホ・タブレット】floatの高さ可変マージン
スマホやタブレットにて画面サイズが違っていても常に横幅を１００％で表示させたいと思っています。 ただfloatで回り込ませた場合、Link１に右と下にマージンができません。 またborder-radiusを付けた場合下部が角丸にならず、何かうまく表示される方法はないかと悩んでいます。 この様な場合どのようにソースを書けばいいのかアドバイスを頂ければと思います。 またLink1やLink2の部分の高さの中央揃えにしたい場合もご教授頂ければ幸いです。 宜しくお願いいたします。 <style type="text/css"> <!-- html,body { margin: 0; padding: 0; height: 100%; } .cl { display: inline-block; } .cl:after { content: ""; display: block; clear: both; } div#boxArea { overflow: hidden; height: auto; width:100%; } div#boxArea div { float: left; padding-bottom: 32767px; margin-bottom: -32767px; } div#boxArea div#one { width: 10%; } div#boxArea div#two { width: 50%; } div#boxArea div#three { width: 50%; } --> </style> </head> <body> <div id="boxArea" class="cl"> <img src="http://www.universe-s.com/img/news/2004/0520_01.jpg" style="float:left; background:#000; width:20%; height:auto;" /> <div style="width:80%"> <div style="width:100%;"><div>aaaaa</div></div> <div id="two"> <div style="background:#F00; margin:5px 5px -32767px 5px; padding:5px 5px 32767px 5px; width:100%; border-radius:10px;">Link1</div> </div> <div id="three"> <div style="background:#060; margin:5px; padding:5px; padding-bottom: 32767px; margin-bottom: -32767px; width:100%; border-radius:10px;">Link2</div> </div> </div> </div> </body>
- 締切済み
- CSS
- ボックスを中央揃えにしたい
先日の質問の回答ありがとうございます。 納得のいくようにできました。 全体を囲ったボックス<div id="base">を中央揃えにしたいので、 #base{ width:800px; margin-left:auto; margin-right:auto; } と書いたのですが、 FireFoxではちゃんと中央揃えされているんですが、IEではされていません。 どうすればいいんでしょうか？お願いします。 http://www.geocities.jp/totti_asroma1927/index.html http://www.geocities.jp/totti_asroma1927/css/base.css
- ベストアンサー
- HTML
- フロートをした場合の縦方向のマージンの指定方法
下記のソースをIEとFFで表示した場合に違いが出てしまいます。 希望はheader、container、footerの間を１０ｐｘずつにしたいです。 http://www.geocities.jp/multi_column/float/06.html こちらのページに「clear したボックスには margin-top は指定しないこと」とあるので、content、sidebarの下マージンを１０ｐｘにしてみました。 IEではsidebarの下マージンが表示されません。 なぜかsidebarよりcontentが長くなるとcontentの下にマージン１０ｐｘが表示されます。 contentとsidebarのどちらが長くなっても同じように表示させるにはどのような方法がありますか？ また、この現象の原因を教えてください。 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http equiv="Content-Style-Type" content="text/css" /> <title>サンプル</title> </head> <body> <div id="header"> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> <div id="container"> <div id="content"> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> <div id="sidebar"> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> </div> <div id="footer"> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> </body> </html> <style> *{ margin: 0; padding: 0; } body{ text-align: center; } div#header{ width: 900px; margin-left: auto; margin-right: auto; margin-bottom: 10px; background-color: #FFCCCC; } div#container{ width: 900px; margin-left: auto; margin-right: auto; } div#content{ float: right; width: 660px; background-color: #FFCCCC; margin-bottom: 10px; } div#sidebar{ float: left; width: 230px; background-color: #FFCCCC; margin-bottom: 10px; } div#footer{ clear: both; width: 900px; margin-left: auto; margin-right: auto; background-color: #FFCCCC; } </style> 長くなって申し訳ありません。よろしくお願い致します。
- ベストアンサー
- HTML
- マージン部分の表示がうまくいかない
素朴な質問です。 キミドリのDIVの中にテキストが入る「A（青）」のDIVが入れ子になっています。 テキスト量に応じてそれぞれ縦のサイズを可変させます。 親のキミドリを基準に上下から50pxのマージンを取る意図で「A（青）」に“margin-top:50px”“margin- bottom:50px”を設定しているのですが、Safari3、Firefox3では上下50pxのマージン部分がキミドリで表示されません。 おそらく表示されないのが正しいCSSの仕様通りだとは思うのですが、マージン部分もキミドリで表示したい場合ははどのようにソースを書けばいいでしょうか？ 親のキミドリにpaddingを設定するしかないのでしょうか？ 以下ソースです。 ご教示よろしくお願いします。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>サンプル</title> </head> <body style="margin:0px;padding:0px;"> <div style="background:#0F0;width:220px;"> <div style="width:100px;background:#00F;margin-top:50px;margin-bottom:50px; margin-left:10px;">あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</div> </div> </html> </body>
- 締切済み
- HTML
- 並んだ２つのfloatボックス、片方を固定位置にしたい
floatでボックスを２つ並べたものの、左側のボックスを、右側のコンテンツ量が増えても、いつでもブラウザの固定された位置の表示させていと考えています。 現在、このfloatの２つのボックスは、大きなボックスで囲んでおり、 topから160pxの余白をとっています。 また、この大きなボックスは、常にセンターにある状態です。 ・トップから常に160pxのマージンが欲しい ・左側の余白は、ブラウザの大きさに寄ってかわる（センタリングの為） ・右のボックスは自由に動く。 この状況で、左のメニューだけを固定することは可能でしょうか。 教えてください。 現在ソースは下記のようにしております。 【HTML】 <div id="container"> <div id="gNavi"> 固定したいメニューBox </div> <div id="main"> スクロールするぐらいの長文Box </div> </div> 【CSS】 * { margin:0 ; padding:0; } body { text-align:center; } #container { width:894px; margin:160px auto 65px auto; } #gNavi { position:fixed; float:left; top:160px; left:auto; width:175px; } #main { float:left; width:716px; margin:0 0 0 2px; text-align:left; overflow:auto; }
- ベストアンサー
- CSS
- div入れ子、親でmarginを設定すると子のmarginは反映されない？
段組みレイアウトでdivが 入れ子になってています。 外側が <div id=wrap> <div id=main> <div id=form> </div> </div> </div> #wrap{ width: 840px; margin-top: 0px; margin-right: auto; margin-bottom: 15px; margin-left: auto; } #main { width: 582px; float: right; padding: 0; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 10; } #form { width: 562px; padding: 0; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 20; } としてあります。 id=formのmargin-left :20; だけがブラウザで反映されず、 flort:right;で右に寄せて左に20pxあけました。 id=mainもflort:right;で右に寄っているだけだったようです。 divを入れ子に使う場合、 親でmarginを設定したら、子のmarginは反映されないのでしょうか？
- ベストアンサー
- HTML
- HTML、ＣＳＳ が、なかなかうまくいきません。
お世話になります。 HTMLを始めたばかりですので、 ご教授いただけたら幸いです。 以下の図のような感じに並べたいのですが、 なかなかうまい具合にいきません。 黄色は、全てボタンになります。 赤は、ボタンについた吹き出し部分となります。 上段の２つのボタンは、やや大きい感じのボタン。 下段の３つのボタンは、上段に比べて、少し小さい感じのボタンになります。 ボタンは、上段(A)と下段(B)で、 HTML と CSS は、分けようかと考えています。 【HTML】 <div class="Button"> <div class="contents"> <div class="Button_boxA clearfix"> <div class="Yellow_Btn_01"><img src="img/Yellow_Btn_01.png" width="200" height="75" /> </div> <div class="Yellow_Btn_02"><img src="img/Yellow_Btn_02.png" width="200" height="80" /> </div> </div> <div class="btn_boxB clearfix"> <div class="Yellow_Btn_03"><img src="img/Yellow_Btn_03.png" width="100" height="60" /> </div> <div class="Yellow_Btn_04"><img src="img/Yellow_Btn_04.png" width="100" height="65" /> </div> <div class="Yellow_Btn_05"><img src="img/Yellow_Btn_05.png" width="100" height="60" /> </div> </div> </div> </div> 【 CSS 】 div.Button{ width:600px; margin-top:20px; margin-right:auto; margin-left:auto; padding-right:25px; } div.btn_boxA{ width::500px; margin-left:auto; margin-right:auto; margin-bottom:10px; } div.low_btn_01{ width:200px; height:75px; margin-left:auto; margin-right:auto; margin-bottom:10px; float:left; } div.low_btn_02{ width:200px; height:80px; margin-left:auto; margin-right:auto; padding-left:25px; margin-bottom:10px; float:left; } div.btn_boxB{ width::500px; margin-left:auto; margin-right:auto; margin-bottom:10px; } div.low_btn_03{ width:100px; height:60px; margin-left:auto; margin-right:auto; margin-bottom:10px; padding-left:25px; float:left; } div.low_btn_04{ width:100px; height:65px; margin-left:auto; margin-right:auto; margin-bottom:10px; padding-left:25px; float:left; ] div.low_btn_05{ width:100px; height:60px; margin-left:auto; margin-right:auto; margin-bottom:10px; padding-left:25px; float:left; } 長ったらしくなってしまいましたが、 ご教授いただけたら、幸いです。 宜しくお願いします。
- 締切済み
- CSS
お礼
お礼が遅くなりました。申し訳ないです。 自分がまだやったことのない設定方法だったりしたので大変勉強になりました！ ありがとうございましたm(_ _)m