p's stylesheets factory

スタイルシートも制する・・・ならいいのですが、
今回は、余白の話です・・（笑）
何のことは無い・・・・
スタイルシートを眺めていると・・・
やたら出てくるおまじないですね。
margin:
padding:
が・・・そうですね。
あと・・
position:もよく似たものなのですが、
これは多少難しいので、今回はパス・・・・
ふたつの余白のおまじないの違いは・・・・
私のスタイルシートサンプルでは・・・
margin:領域外余白
padding:領域内余白
と表現しています。
あるセレクタを設定するときに、
その項目を枠で囲むとよく判るのですが、
枠より外側の余白がmargin:で、
内側の枠から文字などの項目の間の余白がpadding:
と表現すればわかっていただけるでしょうか？

まぁ、使っていけば間隔で自然と判ると思います。

で、それぞれの指定の仕方はほぼ同等に指定可能です。
数値＋単位
パーセント値％
で指定できますが、パーセントの場合は、親要素・・・
つまりその枠が載っているベースの横幅に対する割合となります。

また、値を指定する数は、4つ可能ですが、
省略も可能です。
一つだと、上下左右
二つだと、上下と左右
三つだと、上、左右、下
四つだと、上、右、下、左
となります。
慣れないときは、一つだけ指定して、均等に余白を指定するか、
4つすべて指定して調整した方がやりやすいと思います。

このまじないを使うと、タイトルにアイコンを入れた場合の
タイトルの位置調整などができるようになります。

ちょっと難しいかなぁ？
まぁ、スタイルシートを眺めて、
数値をいじって遊んでみると・・自然にわかるのですけど・・・・。