記事の監修者
1000万PVを超える新規メディアの立ち上げを開発責任者として行う。株式会社ウィルゲートを退社後、民泊の運用代行業者のTwistを設立し上場企業に売却。2016年株式会社Market Drive（現テックアイエス）を設立し、取締役副社長に就任。200万ダウンロードを超えるアプリを開発。現在はプログラミングスクールのカリキュラム制作も担当。現場でのエンジニアリングと経営の両面を支えている。
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%以下にする必要があるので、注意しましょう。
