HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

基礎30. 内余白のプロパティ(padding)

      2017/07/11

paddingプロパティ(パディング)

paddingはボックス(要素)の内余白の設定です。上下左右4方向で設定できます。使用する単位は主にpx, %を使用します。
emでも設定できますが通常はあまり使用しません。

paddingのショートハンド

ショートハンドという省略記法で指定すると下記のようになります。各値は半角スペースで区切ります。

上、右、下、左(右回りで指定します)

上下、左右

上、左右、下

インラインの要素のpadding

ブロックレベル(display: block;)の要素は、すべて方向のpaddingが使えますが、インライン(display: inline;)の要素は上下のpaddingを指定した場合、余白は取れますが中のコンテンツの位置は親要素や隣接する要素により位置がずれます。そのため、インラインの要素にpaddingの上下の指定はしないほうがいいでしょう。

paddingの注意点

paddingの値は幅(width)高さ(height)に加算されます。コーディングの際はpaddingの値を除いた幅、高さの値を指定します。
※CSS3で追加されたbox-sizingプロパティを使用するとpaddingの値を幅に含めることができます。

padding

まとめ

  • paddingはボックスの内余白の設定
  • ショートハンドの値は上から右回りで指定する
  • paddingはwidth, heightの値に加算される

 - HTML・CSS