人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

●質問者: tengen
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:margin padding UL サイト リスト
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● nohohon_x
●20ポイント

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

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

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


2 ● wizemperor
●20ポイント

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


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


3 ● ryokuoshoku
●20ポイント

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

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

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

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

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

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


4 ● hogege
●20ポイント

padding は、borderの内側の余白

margin は、borderの外側の余白

となります。

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

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


5 ● kenichiice
●20ポイント

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...

◎質問者からの返答

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ