- 締切済み
cssでのdiv要素内div要素の上部marginについて
毎回コーディング中に起きる問題で、 独学でcssを学んだために一番スマートなやり方がわからずその場しのぎで対応していたのですが、 毎回モヤモヤしてしまっていたので綺麗なやり方を知りたく思い質問させて頂きました。 まずはこの画像を見て下さい。 http://pajt.paq.jp/t/a/p/test.html 赤のボックスを緑のボックス内で上部からmarginをとりたいのですが、 緑の要素ごと黄色の要素からmarginとってしまいます。 横はきれいにmarginをとれるのに上のmarginがうまくいきません。 簡易的に書くとこのようなものです。 ↓ http://pajt.paq.jp/t/a/p/test2.html <html> <head> <title>画像</title> <style type="text/css"> <!-- #yellow { width:300px; height: 10px; background: #00FFFF} #green { width:200px; height: 400px; background: #00FF00} #green #red { width: 50px; height: 50px; margin: 50px; background: #FF0000} --> </style> </head> <body> <div id="yellow"></div> <div id="green"> <div id="red"> </div> </div> </body> </html> こういったコーディングをする際に、なるべくスマートな記述の方法を教えて頂きたいです。 宜しくお願いします。
- 841crew
- お礼率78% (18/23)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- abril
- ベストアンサー率69% (388/560)
「マージンの相殺」が生じる問題ですね。詳細は下記などをご覧になってみて下さい。 【参考】http://adp.daa.jp/archives/000574.html 過去、同様の質問にお答えさせて頂きました。よろしければそちらも参考にしてみて下さい。 http://oshiete1.goo.ne.jp/qa4948059.html そちらの答えと重複しますが、親要素のボックスにpadding-topを指定する事が可能なレイアウトであれば、一番手っ取り早いです。 今回のサンプルであれば、#greenの方にpadding-top: 50px;を指定して、#redのmargin-topは0にする、といったやり方です。 ただし、ボックスにheightが併用されているので、標準準拠モードの場合はheightの値からpadding-topの値を差し引いてやる必要があります。 サンプルの http://pajt.paq.jp/t/a/p/test2.html の実際のソースを拝見すると、DOCTYPEが全く指定されていませんが、本来はどの様なDOCTYPEを宣言していますか？それによってブラウザによってはDOCTYPEスイッチが切り替わって、後方互換モードになってしまう為、heightの値にpadding-topの値が含まれてしまい、計算方法が違ってきますので… 【参考】http://spreadsheets.google.com/pub?key=pbrvd2wQKc03fJ5QWgYr-Cw&gid=3 【参考】http://spreadsheets.google.com/pub?key=pbrvd2wQKc03fJ5QWgYr-Cw&gid=0
関連するQ&A
- このcssをIEで見ると？
お世話になります。 下記のように書くと、div#bの左からのマージンがIEで見ると、なぜか倍の20pxになってしまいます。FirefoxやOperaはちゃんと表示されるのですが、原因はなぜなんでしょうか？ ご存知の方、よろしくお願いします。 <html> <head> <style type="text/css"> <!-- div#a { width:748; height:200px; background-color:#cccccc; } div#b { margin-left:10px; float:left; width:354px; height:100px; background-color:red; } div#c { float:left; margin-left:20px; width:354px; height:100px; background-color:#0000ff; } --> </style> </head> <body> <div id="a"> <div id="b">b</div> <div id="c">c</div> </div> </body> </html>
- ベストアンサー
- HTML
- cssのmarginについて教えてください
cssのmarginについて教えてください cssを使い、一般的な1カラムのサイトを制作しています。 外枠を組む所までは上手く行ったのですが 中身を入れるとfirefoxで表示した時、上部分に変な余白が出てしまいました。 IE7では問題なく表示されます。 色々と試した結果、中の要素のmargin（下記におけるdiv#header pの部分）が 外枠にも影響を及ぼしているんだろうと予測しているのですが、対処方法が解りません。 （この場合、headerの上部に30pxの空白が出来てしまいます。main等で試しても同じことになりました。） marginを0にする、または<p>や<div>で囲わずに「あいうえお」と書けば余白は出ないのですが、そういう訳にもいかず・・・。 試しに<h1>で囲んだり、idではなくclassで囲んでみたりしたのですが結果は変わらず、 <div>ではなく<span>で囲むと余白はでない変わりにmargin自体が無効状態になってしまいました。 それともこういう場合、div#header p部分のmarginがdiv#headerにも適用されるのは当たり前の事で、私の考え方が間違えているのでしょうか？ div#header pのmarginが影響してるのだとしても、上にだけ影響が出て左右には影響がないことにも首をひねっています。 独学でやってきたので曖昧な部分が多く、質問も上手く文章に出来ず申し訳ないのですが 詳しい方がいらっしゃいましたら、どうぞよろしくお願いします。 ---------------------------------------------------------------------- div#box {background-color: #ffffff ; width : 850px ; margin : 0 auto ; min-height: 100% ; position:relative ;} div#header {background-image: url(image/back-header.gif) ; width : 850px ; height : 90px ;} div#menu {background-image: url(image/back-menu.gif) ; width : 850px ; height : 45px ;} div#main {background-image: url(image/back-main.gif) ; background-repeat: no-repeat ; background-position: top ; width : 850px ; padding-bottom: 25px ;} div#footer {background-image: url(image/back-footer.gif) ; width : 850px ; height : 25px ; position: absolute ; bottom: 0px ; } --------------------------------------------- div#header p {font-size : 0.9em ; margin: 30px ;} ---------------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <body> <div id="box"> <div id="header"><p>あいうえお</p></div> <div id="menu">省略</div> <div id="main">省略</div> <div id="footer">省略</div> </div>
- ベストアンサー
- HTML
- ブロックレベル要素内ブロックレベル要素の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した要素の高さを100%にしたい
はじめまして。 下記のコードは、HTMLファイルで<head>内に<style>を設けて、そこでCSSを操作しています。 この中で<section>が一か所あるのですが、この要素を一番したの<footer>まで届かせたいのですが、hight: 100%, min-height:100%などにしても言うことを聞いてくれません。 heightを極端に大きくすれば<footer>まで届きますが、それ以外にCSSを使ってきちんとアジャストする方法があれば、ご教授いただければ幸いです。 以下コードです。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> html { height: 100%; } body { height: 100%; margin: 0; position: relative; } #root { background: #ccc; min-height: 100%; width: 100%; } header { background: red; height: 30px; width: 100%; } nav { background: gray; float: left; width: 20%; height: 400px; } section { background: green; float: left; width: 70%; min-height: 100%; /** <----- なぜか下まで行かない **/ padding: 60px 0; } footer { background: blue; height: 200px; width: 100%; position: absolute; bottom: -25px; left: 0; margin: 0; } </style> </head> <body> <div id="root"> <header>header</header> <nav>nav</nav> <section>section</section> <footer>footer</footer> </div> </body> </html>
- ベストアンサー
- CSS
- CSSでの質問です
初めて段組を作ってみたんですが、上の余白を無くするにはどうしたらいいのでしょうか？ ソースは以下のとおりです。 <style type="text/css"> <!-- #wrapper { width: 760px; margin: 0px auto; } #header { background-color: #9933FF; height: 50px; top: 0px; } #primary { background-color: #c7d5ed; float: right; width: 550px; margin-top: 10px; margin-bottom: 10px; } #secondary { background-color: #f9cfba; float: left; width: 200px; margin-top: 10px; margin-bottom: 10px; } #footer { clear: both; background-color: #99FFFF; height: 50px; } --> </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
- divタグ+CSSでのレイアウトで、Firefox, Operaで不必要な余白ができてしまいます。
divタグ+CSSでレイアウトしようとしています。 横関係では全体がセンタリングされていて、縦関係においては、各ブロック要素間の余白がなくぴったりくっついている状態にしたいのですが、Firefox 1.0やOpera 8などを使ってレイアウトを確認すると、上下や要素間に余白が出来てしまい、なかなかうまくいきません。 以下、HTMLとCSSのソースを、レイアウトに関する部分だけ載せます。 [--HTML--] <body> <div id="all"> <div id="header"> <p>header</p> </div> <div id="body"> <p>body</p> </div> <div id="sidebar"> <p>sidebar</p> </div> <div id="footer"> <p>footer</p> </div> </div> </body> [--CSS--] @charset "shift_jis" body { margin: 0 auto; padding: 0; text-align: center; } div#all { width: 760px; background-color: blue; margin: 0 auto; padding: 0 0 20px; text-align: left; overflow: hidden; } div#header { position: relative; left: 17px; width: 717px; height: 50px; background-color: yellow; margin: 0; padding: 0; text-align: left; } div#body { position: relative; left: 17px; width: 522px; height: 200px; background-color: lime; margin: 0 0 2em; padding: 0; text-align: left; float: left; } div#sidebar { position: relative; left:32px; width: 180px; height: 200px; background-color: red; margin: 0 0 3em; padding: 0; float: left; } div#footer { position: relative; left: 17px; width: 717px; height: 100px; background-color: fuchsia; margin: 0; padding: 0; clear: both; } ---------- marginやpaddingを"0"にしているにもかかわらず、余白が生まれてしまうのはなぜなのでしょう・・？
- ベストアンサー
- CSS
- marginが効いてくれません。
下記のレイアウトで#contentsのmarginを上下左右10pxで指定していますが、Fierfoxで見るとbottomだけmarginが効いてくれません。 #contentsには背景画像を持ってきたいので、下のmarginがとれないと困っています。 よろしくお願いします。 body { margin: 0px; padding: 0px; text-align: center; } #wrap { padding: 0px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; width: 800px; text-align: left; } #header { background: #0099CC; width: 800px; } #contents { padding: 0px; width: 800px; margin: 10px; } #contents #sidenavi { background: #CCCCCC; width: 160px; float: left; } #contents #main { background: #FFFFCC; width: 580px; float: right; } #footer { background: #99CCFF; height: 80px; width: 800px; clear: both; } p{ margin: 0px; padding: 0px; } ****************************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=shift_jis" /> <title>Layout01</title> <style type="text/css" media="all"> @import url("Layout1.css"); </style> </head> <body> <div id="wrap"> <div id="header"> <h1>Layout</h1> </div> <div id="contents"> <div id="sidenavi">内容がここに入ります</div> <div id="main"> <p>内容がここに入ります</p> </div> </div> <div id="footer">内容がここに入ります</div> </div> </body> </html>
- ベストアンサー
- HTML
- floatしたdiv内の要素について
下記のようなHTML、CSSで、 floatしたdiv「leftside」内にp要素を配置すると p要素の上下に空間が発生します。 このp要素の上下の空間はなんでしょうか？ どうすれば消えますか？ ちなみに、スタイルシートから「leftside」の「float: left;」を削除するとp要素の上下空間はなくなります。 または、pタグで囲まなくても空間は消えます。 よろしくお願いいたします。 ■Html <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="test_style.css" media="all"> </head> <body> <div id="warapper"> <!-- ヘッダ --> <div id="head"> </div> <!-- 左サイト --> <div id="leftside"> <p class="test">leftside</p> </div> <!-- コンテンツ --> <div id="contents"> contents </div> <!-- フッター --> <div id="footer"> <p>fotter</p> </div> </div> </body> </html> ■Css @charset "utf-8"; body{ /*font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*/ font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; font-size: 90%; text-align:center; padding: 0; margin: 0; background-color: #fff; } #warapper{ text-align: left; width: 800px; margin:0 auto; /*ページ全体をセンタリングする指定*/ padding: 0; background-color: #ffffcc; } #head{ background-color: #000; height: 160px; margin: 0 0 20px 0; padding: 0; position: relative; /*ロゴ画像を右下に配置するため*/ } #topbar{ background-color: #dcdcdc; height: 50px; margin: 0 0 20px 0; padding: 0; } #leftside{ background-color: #ccc; width: 180px; float: left; padding: 0; margin: 0 0 20px 0; /*下方向に余白を設ける*/ overflow:hidden; } #contents{ background-color: pink; width:600px; float: right; padding: 0; margin: 0 0 20px 0; /*下方向に余白を設ける*/ } #contents_all{ background-color: pink; margin: 0 0 20px 0; /*下方向に余白を設ける*/ padding: 0 0 0 0; } #footer{ background-color:#666; text-align: center; clear: both; margin: 0; padding: 0.5em 0; } .test { background-color: red; }
- 締切済み
- CSS
- html cssで困っています
基本的な質問ですが、 html部分 <html> <head> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="soto"> <div id="naka"></div> </div> </body> </html> css部分 @charset "utf-8"; #soto{ width:320px; height:480px; background-color:#FB0004; } #naka{ width:160px; height:50px; margin-top:160; margin-left:80px; background-color:#000000; } としたら、赤の長方形の真ん中当たりに黒の長方形がくると思ってやったのですが、全体が下がります。ねらった通りにするにはどのようにしたらいいのでしょうか。paddingで無理矢理したのですが、この記述の根本的なミスはなでしょうか？教えていただければありがたいです。
- ベストアンサー
- HTML
- <div>でレイアウトすると上下に空白が出る
現在cssを独学で勉強中です。 どなたか解るか方、教えてください。 <div>の中にまた<div>でBOXをつくりcssでは"float"を使ってレイアウト しようとしています。 下記の内容でHTMLとcssを記述していますが、入れ子にした<div>要素の 上下に20pxくらいの空欄ができます。 これを出ないようにする方法はありますでしょうか？ というか、記述としては合っているのでしょうか？ 一応いろんなサイトを参考にして記述してはいます。 また、IEとfirefoxでは空欄の出方が違います。 たぶんIEのバグなんでしょうが、対処の方法も含めて教えていただけると ありがたいのですが... 空欄は"margin-top"を「-20px」とかにするとなくなるのですが 今度はSafariでその分要素自体が小さくなってしまいます。 宜しくお願いします。 ---HTML（一応DTDの部分から載せておきます）--------- <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <link rel="stylesheet" type="text/css" href="test3.css" /> <title></title> </head> <body> <div id="container"> <div id="boxA"> A（ヘッダ） </div> <div id="wrapper"> <div id="boxB"> B（メインカラム） </div> <div id="boxC"> C（サイドバー1） </div> </div> <div id="boxD"> D（サイドバー2） </div> <div id="boxE"> E（フッタ） </div> </div> </body> </html> --- css ----------------------- body { text-align:center; margin-top: 0px; } #container { width:800px; height: 800px; margin-top: 0px; margin-left:auto; margin-right:auto; text-align:left; background-color: #33FF66; } #boxA { width:100%; height: 150px; background-color: #9999CC; } #wrapper { width:620px; height: 200px; float:right; background-color: #33CC00; } #boxB { width:440px; height: 200px; float:left; background-color: #999933; } #boxC { width:180px; height: 200px; float:left; background-color: #FF9966; } #boxD { width:180px; height: 200px; float:right; background-color: #996699; } #boxE { width:100%; height: 150px; clear:right; background-color: #33CCCC; }
- ベストアンサー
- HTML
