福岡 SEO対策・ホームページ制作・広告運用代行なら
株式会社スゴヨク

HOME > ブログ > 【CSS基礎】marginとpaddingの違いと使い分けポイントをわかりやすく

SUGOYOKU BLOG

【CSS基礎】marginとpaddingの違いと使い分けポイントをわかりやすく

はじめに

福岡のホームページ制作・SEO対策の株式会社スゴヨクです。



初心のころに立ちどまりがちなCSSプロパティのmarginとpaddingについて解説します。なるべくわかりやすく、かみ砕いて簡単にまとめていきたいと思います。



HTMLのボックスモデル

「ボックスモデル」という概念


marginとpaddingの違いについて理解する前に、まずはHTMLのボックスモデルについて簡単に説明します。


HTMLの中身は全て、以下のような四角い箱型の概念に基づいて成り立っています。




内側から順に、
・content:内容、中身の本体
・padding:境界線(border)と中身の本体(content)との間の余白
・border:要素の内側(padding + content)と外側(margin or 他の要素)との境目、境界線
・margin:境界線の外側の余白、要素と要素の間の余白


この四角い箱型の概念に基づくHTMLの構成のことを、一般的にボックスモデルと言います。



要素の内側


上の図で示しているように、中身の本体(content)に境界線(border)+中身と境界線の間の余白(padding)を合わせたものが〈要素(HTMLのタグ一組に囲まれた部分)〉ということになります。




要素の外側


content + padding + border ←ここまでが要素の内側、すなわちその要素特有の部分です。

その一方で、marginは要素の外側、すなわちある要素と他の要素の間の余白です。


要素の外側ということは、その要素に接しているものではありますが、その要素のものではないということになります。


もう少し詳しく説明すると、
たとえば、同じ領域に異なるmarginの値を設定しているときは、値が相殺されてより大きい範囲のものが適用されます。
上の要素にmargin-bottom: 50px;
下の要素にmargi-top: 80px;
を指定した場合、値の大きい80pxのほうが採用されて、この2つの要素の間の余白は80pxということになります。


また、親要素にmarginが設定されていない状態で子要素にmarginを設定すると、そのmarginが親要素の外にはみ出すということが起こります。



marginとpaddingを理解するためのポイント

その1

・borderの外側に余白を作りたいときにはmargin
・borderと中身の間に余白を作りたいときにはpadding



その2

・paddingはその要素特有のユニークなもの
・marginは他の要素と共有しているグローバルなもの



その3

場合によってはmarginでもpaddingでも、どちらでもよいときもあります。



おわりに


marginとpaddingの挙動に悩んでいる方、勉強中の方の参考になれば幸いです。

2023年IT導入補助金でお得にECサイト

IT導入補助金でお得にECサイト

【実践マーケティング手法22選】 無料ダウンロード

マーケティング手法22選

助成金・補助金・融資・M&A等の総合経営支援サービス「あなたのアイボー」

月額定額制で、ホームページやECサイト運用、営業資料・チラシ・DMなどの製作代行から補助金や助成金など資金調達の情報を提供及び申請代行まで一手に支え会社の成長をサポートするコンサルティング型のサービスです。


補助金 お問い合わせ

ワードプレスでSEO対策をするなら【オリテン】

seoで高位置検証済みのオリジナルテンプレート制作
完全オリジナルの自社テンプレートを毎月3社様限定で制作を承っております。

補助金 お問い合わせ

ホームページの事でお困りならこちらから

お見積り・ホームページ制作・運用、広告に関するご質問まで、どんなことでもお気軽にご相談ください。
日・祝日・休業日以外は24時間以内に返信いたします。

スゴヨク ロゴ

TOP

//サムネイルを取得