コラム

paddingとは｜HTMLでの余白のこと

padding(パディング)とは、HTMLでの余白を指します。

同じくmargin(マージン)も余白のことをさしますが、指し示す場所が違います。

paddingとmarginについて padding 内側の余白を指す margin 外側の余白を指す paddingとmarginは、どちらも要素周辺のことを指しますが、paddingは内側の余白、marginは外側の余白を指すという違いがあります。

HTMLの「padding」と「margin」どう覚えたらいい？考え方は？

HTMLの「padding」と「margin」は、ボックス要素のどこを変更したいかで覚えるのがおすすめです。

外側がmargin、その内側がpaddingなので、要素と要素の間に隙間を作りたい場合は、marginを選択します。

逆に、要素と要素の間を変更せずに、内側に余白をとる場合は、paddingを使用すると覚えるのが良いでしょう。

paddingで余白を指定する方法

別々の数字で上下左右を指定する場合

paddingで上下左右を別々に指定する場合「top」「bottom」「left」「righ」で指定することができます。

例えば、上は5px、下は6px、左は7px、右は8pxで設定したい場合、以下のように記載すれば設定できます。

See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.

もしくは、下記のように記載しても設定が可能なので、覚えやすい方法で記載するのがおすすめです。

See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.

上下左右同じ数字の場合

上下左右同じ感覚で空白を開けたい場合は、一括で設定ができます。

具体例は以下に記載してあるので、参考にしてください。

See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.

※以下はそれぞれの余白を設定した場合

See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.

上下/左右で余白を開けたい場合

上下・左右で同じ余白を開けたい場合「top」「bottom」「left」「righ」でそれぞれ数値を指定して設定することも、もちろん可能です。

また、以下のように記載することでも設定が可能なので、やりやすい方法で記載するのが良いでしょう。

See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.

※以下はそれぞれの余白を設定した場合

See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.

上/下/左右で余白を開けたい場合

上・下・左右で、それぞれ余白を開けたい場合は、「top」など4つを指定して空白を開けることも可能です。

ただし、三か所の数値を入力するだけでも、設定ができるので、参考にしてください。

See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.

※以下はそれぞれの余白を設定した場合

See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.

paddingで使用できる単位 paddingで使用できる単位は、割合を示す値か絶対値の数字で設定が可能です。

例えば、割合で記載する場合width、絶対値の場合10pxなどで設定できます。

ただし、割合(％)で指定する場合は、要素のサイズと外側のサイズの合計を100%以下にする必要があるので、注意しましょう。