スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
Posted at --年--月--日 | 記事URL | スポンサー広告 | Top↑

【tumblrより】margin/padding/borderの関係を分かりやすく示した画像

THE BOX MODEL
THE BOX MODEL

一発ネタに近い感じですが、初心者が混乱しがちな「margin」「padding」「border」の配置関係を分かりやすく示した画像です。

混乱するといえば、Dreamweaver8では(MX2004もそうだったような気がしますが)、CSSでの「margin」と「padding」の設定項目が以下のようになっています。
Dreamweaver8でのCSSのmarginとpadding設定画面

実に分かりづらい。

ちなみに「余白」が「padding」で、マージンが「margin」です。かえって混乱するので「余白」はそのまま「パディング」でもいい気がします。

「margin」と「padding」はHTML/CSSの初心者にとってはどう違うのかよく分からないことが多いように思えます。どっちも余白という意味でとらえてしまい、わけがわからなくなる、と。ブラウザのバグの問題にもよく絡んできますし。

それらを説明するときにこのような画像があると分かりやすくていいですね。

▼スポンサードリンク

Posted at 2008年01月31日 | 記事URL | CSS | Trackback(0) | Comment(0) | Top↑
1つ後の記事:朝日・日経・読売の3紙によるニュースポータル『あらたにす』がオープン
1つ前の記事:Apple製品に使われているフォントの種類とそのフォントの入手方法














管理者にだけ表示を許可する

トラックバックURL
→http://smallwebmemo.blog113.fc2.com/tb.php/206-e89e9395
この記事にトラックバックする(FC2ブログユーザー)
Home
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。