marginは要素の外側の余白を指定し、paddingは要素の内側の余白を指定します。
またmarginやpaddingには略記のショートハンドがあります。
このmarginやpaddingの違いやショートハンドは言葉だけではちょっとわかりづらい。
そこで図解してみます。
以下では黒枠が背景の左隅を表す線、赤枠がテキストを囲む要素(borderやbackgroundなど)の線だとして、下図のように画面左隅に要素が配置されているものとして図示しています。
marginのショートハンド
- margin: 上下左右px;
- margin: 上下px 左右px;
- margin: 上px 左右px 下px;
- margin: 上px 右px 下px 左px;
|
margin: 上下左右px; 例） margin: 10px; |
|---|
 |
|
margin: 上下px 左右px; 例） margin: 10px 20px; |
|---|
 |
|
margin: 上px 左右px 下px; 例） margin: 10px 20px 30px; |
|---|
 |
|
margin: 上px 右px 下px 左px; 例） margin: 10px 20px 30px 40px; |
|---|
 |
paddingのショートハンド
- padding: 上下左右px;
- padding: 上下px 左右px;
- padding: 上px 左右px 下px;
- padding: 上px 右px 下px 左px;
|
padding: 上下左右px; 例） padding: 10px; |
|---|
 |
|
padding: 上下px 左右px; 例） padding: 10px 20px; |
|---|
 |
|
padding: 上px 左右px 下px; 例） padding: 10px 20px 30px; |
|---|
 |
|
padding: 上px 右px 下px 左px; 例） padding: 10px 20px 30px 40px; |
|---|
 |
※pxは書かなくても、またはpxでなくてもemでも指定できます。
ショートハンドはmarginやpaddingの他にもfontやlist-styleに関連したものなどでも使われます。
要は位置の指定や枠線など、四方を指定するもの、できる要素で使われるということです。
marginやpaddingについて説明している図に不満があります。
marginやpaddingは、
margin-top、margin-right、margin-bottom、margin-left、
padding-top、padding-right、padding-bottom、padding-left
を使って指示してあげます。
たとえば上10px、右20px、下30px、左40pxのmarginをとりたいとすると…
margin-top:10px;
margin-right:20px;
margin-bottom:30px;
margin-left:40px;
と書き表すことになります。
これがもし上下左右すべて10pxのmarginをとるとしたら、topもrightもbottomもleftもすべて10px、四方おなじ値の10pxだというのに「margin-○○」をわざわざ4つすべて書かなくてはなりません。
でもこれってめんどうですよね？
そこでmarginやpaddingは省略した表記でも適用されるようになっています。
それを「ショートハンド」と言います。
たとえば上下を10px、左右は20pxにしたいとすると「margin:10px 20px;」とだけ書けばよいのです。
このショートハンドには全4パターンあります。それが先に図示したものです。
（今回は参照しやすいように図解を先に示し、余談を後にしました。それでショートハンドの説明が先後しています。）
プログラミングに馴染みがないと「marginとpaddingの違いやショートハンドの4パターンって忘れやすくってあやふやになりやすくって戸惑いがちなんですよね〜。」…
…って、こんなあるあるなぁい？
それで「marginとpaddingの違い」なんて打って検索をかけること度々。
でも…marginやpaddingについて、あるいはその違いについて説明している図に不満があるのです。わたし。
それはなにかといいますと…ショートハンドではないものを一つの絵で図解しているものはあってもショートハンドを図解したものがみあたらないのです。
なんで？
すぐ覚えてしまうから？
とにかく、『ショートハンド図解』がなかったので、あったらいいなぁ〜ということでつくってみました。
ショートハンドをスイスで覚えてみる？
ショートハンドは基本「上から下」へと変化していくものと考え、これをイメージで覚えるなら…⊥・＋・↻…という記号に置き換えて覚えてみてはいかがでしょうか。
なんとなくわかるかなぁ？
つまりこういうこと。
|
⊥ 値が2つ 例）margin: 10px 20px; |
|---|
 |
|
＋ 値が3つ 例）margin: 10px 20px 30px; |
|---|
 |
|
↻ 値が4つ 例）margin: 10px 20px 30px 40px; |
|---|
 |
どう？なんとなくわかった？
「⊥・＋・↻」に見えた？
またこの記号を言葉で覚えるなら…
「垂直・十字・ぐるり」
↓
「スイッチョ・ジュウジ・時計(回り)」
↓
「スイス・クロス・ウォッチ」
↓
「スイスウォッチ」
どれもスイスを連想させる言葉となります。
けっこうはやい段階でスイスに辿り着いたでしょぉ？
と、このように余白位置を指定するショートハンドの順番を「スイス・クロス・時計」あるいは「スイスウォッチ」と覚えてみてはいかがでしょうか？というご提案でした。
