1ヶ月でWebデザイン・プログラミングスキルをオーダーメイドのカリキュラムで学べるスクール、それがWebCamp。

「数億規模スタートアップのCTO講師」と「エンジニアキャリア専門のポテパン」が贈る、実践型Rubyスクール。

【HTML入門】余白の取り方(paddingとmargin)について

Pocket

HTML言語では、上下左右に余白を取ろうと思ったときに「padding」「margin」を用います。
どちらを使用しても、見た目上では同じように余白が取れているように見える場合があるので、どちらがどのような余白を意味するのか正確に理解していない人もいるのではないでしょうか。

paddingとは

paddingは、内側(要素内の余白のことを表しています。
文字だけで書いてもイマイチピンと来ない人もいるので、図を用いて説明しましょう。

上図で示している「Content」の部分は、divタグ、pタグ、imgタグといったような要素の事です。

Contentに対して装飾(背景色を付けたり線で囲う等々)をすることが出来ますが、
この線(border)の内側の余白部分を「padding」で設定することが出来ます。

Contentにpaddingを設定するとその分領域が広がるので、Contentに背景色を付けるとpadding部分にもその背景色が付きます。

個別指定の記述
padding-top: 〇px; 上にpadding
padding-right: 〇px; 右にpadding
padding-bottom: 〇px; 下にpadding
padding-left: 〇px; 右にpadding
省略記述
padding: 〇px; 4方向に共通のpadding
padding: 〇px 〇px 〇px 〇px; 左から順に、上・右・下・左のpadding
padding: 〇px 〇px; 左から順に、上下に共通のpadding、右左に共通のpadding
padding: 〇px 〇px 〇px; 左から順に、上にpadding、右左に共通のpadding、下にpadding

marginとは

marginは、外側(要素外)の余白のことを表しています。
paddingの説明を読んだ人は、これだけで大体の事を理解できていると思います。

線(border)の外側の余白部分を「margin」で設定することが出来ます。

marginは要素外に対するものなので、Contentに背景色を付けてもmarginの領域にその背景色は付きません。

記述の仕方も、paddingの場合とほぼ変わりません。「padding」の部分を「margin」にするだけです。(例:margin-top: 〇px;)

marginを使用する際の注意点

marginを使うにあたって知っておかないといけないのが「marginは縦方向で重なるmarginを相殺する性質がある」ということです。
横方向は相殺しません。また、paddingはこの性質はありません。

上図は、コンテンツ1と2に対してmarginを4方向に20px設定しています。
コンテンツ1と2の間(横方向)にはmarginが相殺されずに40pxの余白あるのがわかると思います。

上図も同様に、コンテンツ1と2に対してmarginを4方向に20px設定しています。
コンテンツ1と2の間(縦方向)にはmarginが相殺されて20pxの余白しかないのがわかると思います。

補足として、相殺は数値の大きい方が適用されます。上図において、コンテンツ1に20px・コンテンツ2に30pxのmarginを設定していた場合、コンテンツ1と2の間の余白は30pxということになります。

まとめ

ここでは簡単にpaddingとmarginについて説明してきました。
記述の単位には「px」だけではなく、相対的に変わる「%」など他にもあります。
もっと詳細に知りたい方は色々と調べてみるといいでしょう。

【おすすめ記事】

【HTML入門】スペース(空白)を表示させる3つの方法
HTMLの本・参考書の評判
無料で使える!HTMLの学習サイトBEST7
HTMLとCSSの文法チェックツール5選
【HTML】ホームページの画像が表示されない原因とその対処法

投稿者:プロスタ編集部

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

初心者がプログラミングで挫折しない学習方法を無料動画で公開中。オンラインに特化したプログラミングスクール「TechAcademy(テックアカデミー)」が解説。

この記事が気に入ったら
いいね!しよう

プロスタの最新情報をお届けします

あわせて読みたい

関連記事

ページ上部へ戻る