【CSS入門】paddingで要素内側の余白を指定

この記事ではCSSのpaddingプロパティについて解説します。

paddingとは？

CSSでレイアウトをする際、下図のようなボックスモデルと呼ばれる余白の考え方を理解する必要があります。

その中でpaddingは、要素の内側の余白を指定するのに使います。

要素の内側の余白とは要素の中身と枠の間にある部分のことで、上下左右に指定できます。

ちなみに要素にwidthやheightを指定すると、要素の中身の大きさが変わります(図でいうと白い点線内)。

paddingの使い方

まとめて値を指定

paddingは以下のように、まとめて指定することができます。

4つの値を半角スペースで区切って書くと、上から時計周りで余白の値を指定することができます。

CSS

padding: 10px 20px 10px 20px;

/* 上10px 右20px 下10px 左20px */

その他にも、4つの値ではなく3つや2つの値で省略して書くこともできます。

CSS

padding: 10px 20px 10px;
/* 上10px 左右20px 下10px */

padding: 10px 20px;
/* 上下10px 左右20px */

個別に値を指定

Webサイトを作っていると、個別に値を指定する機会は割と多いのでこちらも覚えておきましょう。

CSS

padding-top: 10px;
/* 上のpaddingだけ:10px */  


padding-right: 20px;
/* 右のpaddingだけ:20px */


padding-bottom: 10px;
/* 下のpaddingだけ:10px */


padding-left: 20px;
/* 左のpaddingだけ:20px */

以下の場合、「上下のpaddingだけ20px」という指定になります。

HTML

<p>サンプルテキスト</p>

CSS

p{
  padding: 20px 0;
  background： blue;
}
/* 上下20px 左右0px */

まとめ

この記事に書かれていることで、特に覚えておいて欲しいことは以下の2点です。

CSS関係の記事は他にも書いているので、宜しければそちらもチェックしてみてください。