リストをつかってナビゲーションを作成していますが、ul,li,aのmarginとpaddingの違いがわかりません。それぞれのmarginとpaddingについてわかりやすく解説(できれば図で)しているサイトをご存知の方教えてください。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2007/08/15 11:27:26
  • 終了:2007/08/22 11:30:03

回答(5件)

id:nohohon_x No.1

nohohon_x回答回数72ベストアンサー獲得回数12007/08/15 11:39:12

ポイント20pt

このサイトのマージンとパッディングの項目をご覧ください。

要はブロックの外か中かの違いです。

http://www.nextindex.net/web/CSS/index.html

id:wizemperor No.2

wizemperor回答回数379ベストアンサー獲得回数522007/08/15 11:59:07

ポイント20pt

スライダーを動かすと立体的にも把握できます。


http://www.redmelon.net/tstme/box_model/


paddingはborderより内側。marginはborderより外側です。

その他、垂直方向のmarginは相殺されます(例外あり)。


http://www.techdego.com/2007/05/margin_collapsing_css.php


ulだろうがliだろうがaだろうが、他のものでも基本的には同じ(厳密にはブロックレベル要素とインライン要素で違う)で、ただそれが入れ子になっているだけです。

id:ryokuoshoku No.3

ryokuoshoku回答回数65ベストアンサー獲得回数92007/08/15 12:00:49

ポイント20pt

ul,li,aに限りませんが、marginとpaddingについてはこの図が分かりやすいかと。

http://www.tagindex.com/stylesheet/box/margin.html

内の【マージンとパディング】を参照。

ちなみにIE5.0ではマージンの解釈にバグがあるのでご注意ください。

http://homepage1.nifty.com/emk/moz/browsertest.html

内の9.マージンの相殺を参照。

id:hogege No.4

hogege回答回数61ベストアンサー獲得回数42007/08/15 12:23:04

ポイント20pt

padding は、borderの内側の余白

margin は、borderの外側の余白

となります。

これは、tableであろうが、ul,li,a であろうが同じです。

http://www.web-mame.net/css_layout/beginner3.html

id:kenichiice No.5

kenichiice回答回数48ベストアンサー獲得回数72007/08/18 16:29:29

ポイント20pt

CSSの仕様書にULとLIを使った例が図示されているので、参考になると思います。


4.1 ブロックレベル要素 (CSS1)

http://www.y-adagio.com/public/standards/css1/cssmain.htm#block-...


8.2 マージン,パディング及び境界の例 (CSS2)

http://www.y-adagio.com/public/standards/tr_css2/box.html#mpb-ex...

id:tengen

ありがとうございます。こういう回答を求めていました。

2007/08/18 18:24:47

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません