間隔をあける【margin、padding】：CSS入門
CSS入門（9）
さて、「margin、padding」の初期化も済んだし・・・もう、お風呂にでも入って、寝ましょうか？疲れたし。
そのようなわけにもいかないので、お話は、次の順番で進みます。
margin、paddingが何のことやら分からない人は、記事「margin、paddingとは？：CSS入門」からご覧ください。
margin、paddingで間隔をあける
margin、paddingを使って、間隔（余白）を指定しましょう。
1：margin、paddingの事前計画
（01）
まず、どういう状況かと言えば、ブラウザで表示すると、次のようになっているはずです。<h1>タグ、<h2>タグが初期化された状態です。
CSSコードは、次のような状況です。borderは、CSS入門ですので、分かりやすい形にしてあります。
（02）
えー、次のように変更してみようと思います。
h1 | paddingで、全方向に「5px」指定する。 |
|---|---|
h2 | marginで、上に「10px」指定する。 |
paddingで、上下に「2px」、左右に「5px」指定する。 | |
img | marginで、上に「4px」、下に「6px」、左右に「15px」指定する。 |
ちょっと分かり難いかもしれませんが、ブラウザで表示したときは、次のように間隔（余白）が入ります。
2：margin、paddingを指定する
（03）
それでは、ひとつずつ設定していくことにしましょう。まずは、<h1>タグにpaddingで、全方向に「5px」ずつ指定します。
CSSコードは、次のように書くことができます。
値は、左から「上」、「右」、「下」、「左」を意味します。つまり、時計回りで値を指定していくわけです。
（04）
どんどん設定していきましょう。<h2>タグにmarginで、上に「10px」指定します。
CSSコードは、次のように書くことができます。
それから、<h2>タグにpaddingで、上下に「2px」、左右に「5px」指定します。
CSSコードは、次のように書くことができます。
（05）
最後に、<img>タグにmarginで、上に「4px」、下に「6px」、左右に「15px」指定します。
CSSコードは、次のように書くことができます。
いかがでしょう？marginにしろ、paddingにしろ、「上」、「右」、「下」、「左」の順番で値を指定すれば良いだけです。
3：省略書きできます。
（06）
<h1>タグには、CSSコードを次のように書きました。
しかし、これはすべて「5px」ですから、次のように省略して書くことができます。1つだけ値を書く場合は、全方向に同じ値を指定する意味になります。
（07）
<h2>タグには、CSSコードを次のように書きました。
しかし、わざわざ「0」を指定するのは、どうにも無駄です。marginは、borderと同様に「top」、「right」、「bottom」、「left」が指定できるので、次のように書くことができます。
整理すると、次のような感じです。
上 | margin-top | padding-top |
|---|---|---|
右 | margin-right | padding-right |
下 | margin-bottom | padding-bottom |
左 | margin-left | padding-left |
それから、<h2>タグは、もうひとつありましたね。
これは、次のように書くことができます。2つ値を書く場合は、1つ目の値が「上下」、2つ目の値が「左右」の意味になります。
（08）
<img>タグには、CSSコードを次のように書きました。
これは、次のように書くことができます。3つ値を書く場合は、1つ目の値が「上」、2つ目の値が「左右」、3つ目の値が「下」の意味になります。
4：統合します。
（09）
これらを、CSSファイルに追加書きしておきましょう。
ちょっと、省略書きするのは、覚えるのがしんどいかもしれませんが、省略書きするのが一般的なので、時間をかけて覚えていってください。
もちろん、慣れるまで、値を4つ（上右下左）書く方法でも構いません。見かけたときに、驚かないようにはしておきましょう。
5：tableにも
（10）
<table>タグにも、marginを入れておいてください。上下左右 5pxくらいかしら。よろしくお願いします。
次回予告
次回は、子孫セレクタについて書く予定です。
関連記事
CSSに関連する記事を、ご紹介します。
1：カスタマイズ前
2：CSSの基本的なこと
3：色の指定
4：罫線の指定
5：間隔（余白）の指定
6：継承と子孫セレクタ
7：箇条書き（リスト）
8：文字（フォント）の指定
9：idセレクタ、classセレクタ
10：文章を読みやすくする
11：文字の中央揃え（センタリング）
12：レイアウト
13：tableの中央揃え（センタリング）
14：CSSで飾る
15：まとめ
作成日：2008/04/17 更新日：2008/04/18
« 「margin、paddingの初期化」｜「継承と子孫セレクタとは？」 »
コメントありがとうございます。
現在、コメントさんも、お休みしています。
びっくりした！！
ブラウザの初期化
marginとpaddingは、IE6が最も世話を焼かせるのか！知らなかった。
CSSハックが必要ってことですね。調べておかないといけないな。
教えてくれてありがとうございます。(・∀・)/39
初期化は、余白（marginとpadding）以外にも行います。
ここなんか参考になるのではないかしら。↓
http://developer.yahoo.com/yui/reset/
たとえ英語が苦手だったとしても、下にずずっとスクロールして、
コードを見れば、大丈夫です。（コードは世界共通言語）
borderは、上下左右すべて一緒でないなら、
別々でいいんじゃないですかね。たぶん。
うへっ、はてぶッスか。恐れ多いなぁ。(´Д｀;)
オソルオソル ここまで来てしました。
もちろんkumaCrowさんが凄いのですが。
tableのmarginは60pxにしました。
ちゃんと間隔が空いてびっくりです。
すんごいなぁ
すーごい！
CSSもやってまうのですね。
どんだけ、吸収力高いんですか！
びっくり。
きっと、もともと頭がよろしいのね。
でも、少しずつ話はややこしくなってくるので、
うまく書けていないところも出てきます。
不明瞭な箇所があれば、ご指摘ください。
宜しくお願いします。
トラックバック
http://kumacrow.blog111.fc2.com/tb.php/271-117c5221
marginとpaddingは、IE6が最も世話を焼かせる部分だと思っているので
本当に興味深く読ませて頂きました。
で、それを吹っ飛ばしてしまうくらい、すっごいびっくりしたんですけど、
marginとpadding、これ、ぶ、ブラウザが勝手に開けててくれたんですね！
いやーびっくりした、全然、そんな事思っても見ませんでした。
あー、ほんとびっくりした・・・
全く空間があいている事に疑問も持たずにこれまで来てましたorz
なるほど、こういう事だったんですね。
実は、ボーダーも自分はソフトに頼ったりしてるから、４つの値を全部書く、
なんて事はたまにやってます。
でも、やっぱりなー。自分でまとめて指定をして行くようにしなくちゃ！と、
思いました。頑張ろう！
なんとなく、読む前と違って頭が良くなった気がする・・・！
もしかして、利口になったかも・・・！
見落としていた部分が多いmarginとpaddingなので、これから何回も
この記事見直したいと思います！
というわけではてぶに登録してみる・・・！