- ベストアンサー
marginの値が0と値、未指定との違い
例えば、次の二つはどう違うのでしょうか？ ※abcというボックスがあったとします。 (1)#abc{margin:0 20px 0 0;} (2)#abc{margin-right:20px;} 色々なレイアウトで上の(1)と(2)との違いを確かめたのですが、その違いが分かりませんでした。上記ではmargin-rightですが、もちろんleft,top,bottomでもそうです。具体的なサンプルソースがなくてすいません。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (3)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
ブラウザの持つデフォルトのスタイルは、カスケードの優先度が最も低いですが、指定されない場合はそれが利用されます。 カスケーディングの仕組みは、CSSカスケーディングスタイルシートの根幹といえる仕組みです。それを無視してスタイルシートを書くから混乱するのですよ。 ユーザーの最優先宣言スタイル＞著者の最優先宣言スタイル＞著者のスタイル＞ユーザーのスタイル＞デフォルトのスタイル(ブラウザなど) その上で、詳細度で比較され さらに出現順番 でしたよね。 ・5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html ) ・6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html ) #一意セレクタ(HTML上のID要素)で指定されていますが、これは詳細度が[0,1,0,0]です。(本来は*#id-nameの意味) この場合、タイプセレクタ(HTMLの要素)が*(全称セレクタ詳細度0000)が省略されているとみなすため、すべてのタイプ(要素)に対して既存ののスタイルがカスケーディングで引き継がれています。 <body> <div class="header"> <h1 id="Top">タイトル</h1> <p>この部分はヘッダーです。</p> <div class="nav"> <ol id="siteMap"> <li id="goTop">リンク</li> <li>リンク</li> </ol> </div> </div> <div class="section"><h2>本文</h2></div> <div class="footer"><h2>文書情報</h2></div> </body> と書かれていた場合・・ #Top{margin:0 20px 0px 0px;} #SiteMap{margin:0 20px 0px 0px;} #goTop{margin:0 20px 0px 0px;} と、 #Top{margin-right:20px;} #SiteMap{margin-right:20px;} #goTop{margin-right:20px;} は結果が異なるはずです。 製作されているのですから、firefoxをお使いだと思いますが、firrefoxの開発者向けツール( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )にある Firebug( https://addons.mozilla.jp/firefox/details/1843 )を使用すると、それぞれの要素のマージンやパテディングがどのように適用されていて、どのようにカスケーディングされているかが一目でわかります。 ★HTMLに<div id="outer"><div id="inner">このような書き方はしませんよ。 「id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」と文書構造を示す物をつけます。具体的には、HTML5の新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )のような物をその意味に従ってつけるほうが良いです。後と絶対に楽です。 ★デザインためにidをフルと、その詳細度は0100と高く扱いにくいです。
お礼
ありがとうございました。 質問の(1)と(2)とは違うということをはっきり理解しておきます。
- DrFell
- ベストアンサー率55% (305/551)
1）は、上下左右を一気にしていする記述で、ショートハンドで指定しています。 （参考）http://zero.css-happylife.com/basic/shorthand.shtml 2)は右だけ指定してます。＃1さんのおっしゃるとおり、他が0の場合には、同じ表示になりますが、違う値の場合には、1と同じにはなりません。
補足
お二方、ありがとうございます。 場合によっては(1)と(2)で違いがあるということなのですが、下の例で#outerと#innerのマージン、パディングを色々なパターンで指定しているのですが、違いが分かりませんでした。(1)と(2)の違いが出るのはどういう場合なのでしょうか？ ※デフォルトCSS(IE9)はそのままです。関係のないコードは省略してあります、表示がおかしくなっていたらすいません。 ------------HTML---------------- <div id="outer"> <div id="inner"> </div> </div> -------------CSS---------------- #outer{ width:500px; height:300px; background:lime; } #inner{ width:300px; height:150px; background:orange; }
- vege22
- ベストアンサー率0% (0/1)
(2)#abc{margin-right:20px;} とした場合は、右以外はデフォルトの値、またはそれより下の要素の設定に従うことになります。 (1)と(2)の違いがわからなかったということなので、#abcの上下と左のマージンは元から0だということだと思います。
お礼
ありがとうございました。
お礼
ありがとうございました。 参考URLは見ました。おかげ様で(1)のような書き方に対しての違和感はだいぶ薄れました。回答者様が仰るデフォルト値が0でない要素について調べ直して、理解を深めていきたいと思います。