Margin & Padding

ここでは、marginとpaddingについて説明します。…ちょっと難しいかもしれません。
私も、最初は意味わからなかったです……けど、わかれば簡単!…でもないですけどね。

marginとpaddingは共に、余白設定です。
で、marginはborderの外側の余白。paddingはborderの内側の余白になります。




図で表すと上のようになりますが……この図だけじゃわかりませんよね。てか、図画工作能力が無さ過ぎる…!!
…けども、他に説明しようがないしなー…。

Lecture

では、まずはテンプレートDLファイルに同梱されている「style.css」を開いてみてください。
今回は、h3部分を見てみましょうか。



こんな風に、marginとpaddingが書かれていますね。
(テンプレートによって、数値などに違いがあるかと思います)


では、marginとpaddingの書き方説明。
margin{上 右 下 左}
margin{上下 左右}
margin{上下左右}

 * margin使ってますが、paddingも同じです

こんな感じに書きます。
ですから、h3のmarginは、上0px、右0px、下0px、左15px ということですね。
で、paddingのほうは、上下0px、左右8px ということになります。

…わかりますかね?難しいかな…。
では、例題出してみましょうか!(すんごくいきなりですが)


問い1:次のmarginとpaddingの上下左右の余白を答えよ。
    答え方は「上○px、右○px」のように、上下左右の数値を一つずつ答えよ。

1. margin{10px 3px 8px 22px}
2. padding{11px 0px 11px 0px}
3. margin{8px 10px}
4. padding{5px 5px}
5. margin{0px}
6. padding{5000px}
7. margin{-10px 0px 0px 0px}

わかりましたかね?答えは下のbox内を反転してみてください。

1. 上10px、右3px、下8px、左22px
2. 上11px、右0px、下11px、左0px
3. 上8px、右10px、下8px、左10px(上下8px、左右10px)
4. 上5px、右5px、下5px、左5px(上下左右5px)
5. 上0px、右0px、下0px、左0px(上下左右0px)
6. 上5000px、右5000px、下5000px、左5000px(上下左右5000px)
7. 上-10px、右0px、下0px、左0px

2. と4. は省略して書くこともできますね。
2. は padding{11px 0px} 4. は padding{5px} と意味は同じです。

7. の-10pxは…あることはありますが、あまり使わないですね。
あとpaddingでは−(マイナス)は使えないと思います。(ここらへんは、私も説明できるほど詳しくないです)




んでは、続いて実践で試してみましょうか!



サンプルボックス

上のボックスのタグは、

.box{
border:1px solid #333333;
}

となっております。



んでは、marginの設定からやってみますか。

サンプルボックス

.box{
border:1px solid #333333;
margin:0px 100px;
}

左右のmarginが100pxなので、box外側の左右に100pxずつ余白ができました。



次はpadding。

サンプルボックス

.box{
border:1px solid #333333;
margin:0px 100px;
padding:10px;
}

上下左右のpaddingが10pxなので、box内の文字の上下左右に10pxずつ余白ができました。


……なんとなーくわかってもらえたでしょうか?
ご自分で色々と試していけば、わかっていくかとは思います。