読者です 読者をやめる 読者になる 読者になる

青空コメントアウト

WEBのこと、デザインのこと、ご飯のこと、趣味のこと。青空の向こうの誰かに届きますように。

脱CSS初心者!役割から覚えるmarginとpaddingの使い分け

このエントリーをはてなブックマークに追加

f:id:cocoro27:20160521213144j:plain まいどです。
フロントからバックまで手広い(つもりの)エンジニアのあろえりーな(@aloerina_)です。

CSSを書く上で避けては通れないmarginpadding問題。どう使い分けるのかをできることベースで覚えている人も多いかと思いますが、ここでは各々の役割ベースで整理してみようと思います。理解が深まると使い分け方をより覚えやすくなりますもんね(たぶん)。



おさらい

paddingとはなにか、marginとはなにかについて、よくある図解です。Content(文字などの要素)とborderの間の空間がpadding、borderの外側の空間がmarginですね。 f:id:cocoro27:20160520205921j:plain




役割から見る margin と padding

marginとはエレメント同士の余白

あるエレメントにmarginを指定することは、「周囲の要素とこれだけ余白をとってくださいね」と指定することと同じ意味になります。そのため、隣り合う要素A・Bがあったとき

「Aの周辺の余白は16pxとってください」
「Bの周辺の余白は8pxとってください」

とすると、ふたつの間の余白は大きい方の16pxとなります。合算して24pxとなることはありません。marginは、隣り合う要素との距離感について指定するものなので、隣り合う要素が互いにmargin指定されている場合どちらか一方を採用するしかなく、相殺が起こるのです。

f:id:cocoro27:20160520211436j:plain

ちなみにwidth: 100%としてmargin: 8pxとすると横がはみ出すのも、marginが余白を示すからです。width: 100%は、エレメントの横の長さを画面の横幅(親要素の横幅)とぴったり同じにするものなので、その状態で左右に余白をもたせたら…そりゃ画面からはみ出します。ということです。



paddingとは詰め物

あるエレメントにpaddingを指定すると、「エレメントの周囲に見えない詰め物を入れてくださいね」と指定することになります。詰め物なので、上下のpaddingが指定されたら当然heightは高くなります(widthもまた然り)。

エレメントの高さ(height) = コンテンツの高さ + 上下の詰め物の高さ

ちなみにpaddingはmarginとは違い周囲のエレメントとは無関係です。paddingが指定されたエレメント自身にのみ変化が起こるものです。そのため相殺は起こりません。 そのため、隣り合うふたつの要素それぞれにpaddingが指定されていたら、見た目上はpaddingの合算値分の感覚が空いているように見えます。

f:id:cocoro27:20160520212623j:plain




できることから見る margin と padding

borderの内側か外側か

borderの内側と外側のどちらにスペースをとりたいかによって、paddingとmarginのどちらを使うかを選ぶことがあります。特にborder: 1px solid #333などの指定がある場合は、この判断がよく使われると思います。



backgroundの指定がある場合

background-color: redなどbackgroundに指定がある場合、それをスペースにも適用したいかどうかでpaddingとmarginを使い分けることがあります。backgroundはエレメントの背景を指定するものなので、エレメント内の詰め物であるpadding(によって作られたスペース)には適用されます。逆にエレメントの外側の空白であるmargin(によって作られたスペース)には適用されません。上のborderも同様の理屈が適用されますね。



相殺を使う / 合算値を使う

ここまで来たら言うまでもありませんが、相殺して大きい値を使いたい場合はmarginを、合算値を使う場合はpaddingを。




おわりに

できることから覚えても実装上困ることは少ないかもしれませんが、正確なコード、理にかなったコードというのは、保守性も可読性も高いものです。また、marginとpaddingの役割をきちんと把握していると、できることをド忘れしても理屈から導き出せます。そんなわけで、これを機にそれぞれの役割を整理していただければまとめた甲斐があります。

分かりにくい点やご質問などがあれば、すべて即答とはいかないかもしれませんが出来る限り回答いたします。遠慮無く@aloerina_までどうぞ。

TOP