【初心者向け】HTMLで余白をつけるには？padding？margin？どっちが正解なのか解説します

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%以下にする必要があるので、注意しましょう。

全国どこにいても学べる！超優良のプログラミングスクールまとめました
【国内完全網羅】現役エンジニアが厳選したおすすめのプログラミングスクール

自分の住んでるエリアでプログラミングスクールを探したい⭐️

エリア別で、おすすめのプログラミングスクールをまとめました。

ぜひ参考にしてみてくださいね。

北海道 / 東北

北海道 / 青森 / 秋田 / 岩手 / 山形 / 福島

関東

群馬 / 栃木 / 埼玉 / 茨城 / 東京 / 千葉 / 神奈川

中部

福井 / 石川 / 岐阜 / 愛知 / 富山 / 長野 / 山梨 / 静岡 / 新潟

近畿

兵庫 / 京都 / 大阪 / 滋賀 / 奈良 / 三重 / 和歌山

中国

山口 / 島根 / 鳥取 / 広島 / 岡山

四国

愛媛 / 香川 / 高知 / 徳島

九州 / 沖縄

長崎 / 佐賀 / 熊本 / 福岡 / 大分 / 宮崎 / 鹿児島 / 沖縄