Webデザイン:オンラインリファレンス

ボックスでスペースを確保する

margin,border,paddingの具体例

HTMLとCSSで,それぞれ
035-1.png
035-2.png
のように記述すると,下図のように表示される.
borderの位置を基準に,margin・paddingの関係を確認しよう.
margin(特にボックスの上下のmargin)については,あるボックスの下マージンと次のボックスの上マージンのうち,大きい値のほうが採用される.
CSSを見ながらじっくり眺めて解読してみよう.
035-3.png

やっていはいけないこと...

Wordなどでよく利用されているのを見かけるが,スペースキーを何個も押してスペースを確保するのは厳禁.
また,HTMLを書き慣れている人は,「<br>タグ」(改行)をたくさんならべて縦方向のスペースを作ることがよくあるが,これもHTML+CSSによるデザインでは厳禁.
↑インデックスに戻る←前の項目(036. ボックスとは)→次の項目(038. ボックス関連プロパティの共通事項)