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

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

記事の監修者

加藤羽也人

加藤羽也人

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

テックアイエスの体験会

プログラミング学習なら

これからの時代に絶対必要なプログラミングスキルをオフラインでもオンラインでも学習できるのは「テックアイエス」だけ

無料体験はこちら

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

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

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

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

北海道 / 東北

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

関東

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

中部

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

近畿

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

中国

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

四国

愛媛 / 香川 / 高知 / 徳島

九州 / 沖縄

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

稼げるスキルを身につけるなら

どこにいても、どこよりもプログラミングスキルを習得できるのはテックアイエスだけ。

HPで詳細を確認する

将来を変えられるのは「今」しかない!

これからの働き方、生活に不安がある方はプログラミング学習を考えてみませんか。

詳しい情報をHPでチェックする

自立したい人支えます!

これからのスキルを習得して自分で稼ぐスキル身につけたい人は必見です。

HPで詳しく見る

将来を変えられるのは「今」しかない!

これからの働き方、生活に不安がある方はプログラミング学習を考えてみませんか。

詳しい情報をHPでチェックする

稼げるスキルを身につけるなら

どこにいても、どこよりもプログラミングスキルを習得できるのはテックアイエスだけ。

HPで詳細を確認する

自立したい人支えます!

これからのスキルを習得して自分で稼ぐスキル身につけたい人は必見です。

HPで詳しく見る

自立したい人支えます!

これからのスキルを習得して自分で稼ぐスキル身につけたい人は必見です。

HPで詳しく見る

将来を変えられるのは「今」しかない!

これからの働き方、生活に不安がある方はプログラミング学習を考えてみませんか。

詳しい情報をHPでチェックする

稼げるスキルを身につけるなら

どこにいても、どこよりもプログラミングスキルを習得できるのはテックアイエスだけ。

HPで詳細を確認する