CSS 内部余白PADDINGタグの使い方の基本

CSS

【初心者向け】CSS 内部余白paddingタグの使い方の基本を解説

2019年1月21日

今回は、CSSの内部余白paddingタグの基本と注意点、外部余白marginとの違いを説明します。
 

CSSサンプル 内部余白100px
 

paddingの基本を使ったレイアウトの調整は、Webデザインする上で必須といえるくらいよく使うのでぜひ覚えておきましょう。

 

 

内部余白paddingタグの使い方

内部余白 paddingの基本

まずは内部余白paddingの基本的な使い方を説明していきます。
 

下記は一番シンプルな例、「padding:100px」と内部余白を指定した例です。
 

■使用例 divタグの内部余白を100pxとる
divの内部余白を100pxとる
 

■表示例
CSSサンプル 内部余白100px
 

■上記例のソースコード divタグの内部余白を100pxとる

 

値の単位は「px」です。外部余白marginと同様に複数の値を設定することができます。

項目内容
padding:値;上下左右で指定した値の余白が設定されます。
例. padding:100px;
padding:値1 値2;「値1が上下」「値2が左右」の余白が設定されます。
例. padding:100px 200px;
padding:値1 値2 値3 値4;記述順に上右下左と余白が設定(時計周り)されます。
例. padding:100px 150px 200px 250px;

 

なお、各要素に適用されているmarginはChromeの検証ツールを利用して、視覚的に確認することができます。
Chromeの検証ツールで要素に適用されているpaddingを確認
 

paddingはHTML要素の内側に余白を取るから、「内部余白」っていうんですね。

 

paddingの値の基本は「px」です。値は半角スペースで区切って複数設定することができます。
 

項目内容
padding:値;上下左右で指定した値の余白が設定されます。
例 padding:100px → 上下左右に100pxの外部余白
padding:値1 値2;「値1が上下」「値2が左右」の余白が設定されます。
例 padding:100px 50px → 上下に100px・左右に50pxの外部余白
padding:値1 値2 値3;「値1が上」「値2が左右」「値3が下」の余白が設定されます。
例 padding:100px 150px 200px → 上に100px・左右に150px・下に200px
padding:値1 値2 値3 値4;記述順に上右下左と余白が設定(時計周り)されます。
例 padding:100px 150px 200px 250px → 上に100px・右に150px・下に200px・左に250px

 

なお、paddingは、以下のように方向を指定して個々に設定することもできます。

項目内容
padding-left:値;要素の左側の外部余白を指定します。
例 margin-left:100px → 左側に100pxの外部余白
padding-right:値;要素の右側の外部余白を指定します。
例 padding-right:100px → 右側に100pxの外部余白
padding-top:値;要素の上側の外部余白を指定します。
例 padding-top:100px → 上側に100pxの外部余白
padding-bottom:値;要素の下側の外部余白を指定します。
例 padding-bottom:100px → 下側に100pxの外部余白

 
 

内部余白paddingと外部余白marginの違い

余白には要素内部に設定する内部余白(padding)のほかに、要素外部に設定する外部余白(margin)があります。
 

外部余白と内部余白の設定
 

divの外部余白を100pxとる
 

値の指定方法は、基本的にpaddingと同様です。半角スペースで区切って複数設定することができます。単位は「px」のほか「%」を使うこともできます。
 

項目内容
margin:値;上下左右で指定した値の余白が設定されます。
例 margin:100px → 上下左右に100pxの外部余白
margin:値1 値2;「値1が上下」「値2が左右」の余白が設定されます。
例 margin:100px 50px → 上下に100px・左右に50pxの外部余白
margin:値1 値2 値3;「値1が上」「値2が左右」「値3が下」の余白が設定されます。
例 margin:100px 150px 200px → 上に100px・左右に150px・下に200px
margin:値1 値2 値3 値4;記述順に上右下左と余白が設定(時計周り)されます。
例 margin:100px 150px 200px 250px → 上に100px・右に150px・下に200px・左に250px

 

padding同様、marginでも方向を指定して個々に設定することもできます。

項目内容
margin-left:値;要素の左側の外部余白を指定します。
例 margin-left:100px → 左側に100pxの外部余白
margin-right:値;要素の右側の外部余白を指定します。
例 margin-right:100px → 右側に100pxの外部余白
margin-top:値;要素の上側の外部余白を指定します。
例 margin-top:100px → 上側に100pxの外部余白
margin-bottom:値;要素の下側の外部余白を指定します。
例 margin-bottom:100px → 下側に100pxの外部余白

 

なお、外部余白marginの詳しい使い方については「【初心者向け】CSS 外部余白marginタグの使い方の基本を解説」を合わせてご参照ください。
 

この記事ではmarginに関する詳細は割愛しますが、余白を設定する時は「内部余白padding」と「外部余白margin」を使い分けられるようにしましょう。
 
 

paddingが適用できるブロックレベル要素と適用できないインライン要素

paddingを適用できるHTML要素は、基本的にブロックレベル要素になりますので、意識しておきましょう。
 

<div>や<a>などのHTMLの各要素は、大きくブロックレベル要素とインライン要素のどちらかに分類することができます。
HTML ブロックレベル要素とインライン要素の違いと特徴
 

項目主な要素特徴
ブロックレベル要素
  • div
  • h1〜h6
  • p
  • ul,ol,li
  • dl,dt,dd
  • table
  • form
  • hr
  • pre
  • blockquote
  • 要素の前後に改行が入り、ブロック要素同士縦に並ぶ
  • 横幅や高さを指定できる
  • 余白(margin,padding)が指定できる
インライン要素
  • a
  • span
  • b
  • img(※)
  • label
  • input(※)
  • select(※)
  • textarea(※)
  • 要素の前後に改行が入らず、インライン要素同士横に並ぶ
  • 横幅や高さを指定できない(※1)
  • ブロックレベル要素のように上下の余白設定(margin,padding)が効かない(※2)

 

(※1)img、input、textareaなどの一部のタグは幅高さや余白の設定が可能です。
(※2)余白について厳密にいうと外部余白marginについては上下は効きません(左右は効きます)
内部余白paddingについては上下左右設定できますがブロックレベル要素のように正しく余白が取れません。

 

(※注)ブロックレベル要素とインライン要素での分類方法ですが、HTML5からは新たに「カテゴリー」という新たな分類方法でより細かくジャンル分けされるようになりました。しかし簡略のためここではこれまでのブロックレベルとインラインでの分類で説明していきます。
 

なお、ブロックレベルとインライン要素の詳細については「インライン要素・ブロックレベル要素とCSS「display」の使い方」をあわせてご参考ください。
 
 

padding設定時に適用されるボックス大きさの算出方法 border-box

内部余白padding(や枠線border)を設定する際に、内部余白の大きさを横幅や高さに含めるかどうか、ボックスの算出方法に「border-box」を指定する方法があります。
 

CSS box-sizingを設定するときとしない時の違い
 

■box-sizingプロパティで使う設定値と意味

項目内容
box-sizing:content-box枠線「border」や内部余白「padding」を横幅と高さに含めない(初期値)
box-sizing:border-box枠線「border」や内部余白「padding」を横幅と高さに含める

 

■表示例


 

■上記のソースコード

 

基本的に、box-sizing:border-boxの方がレイアウトの大きさの計算が楽になるので、ユニバーサルセレクタ*などで、box-sizing:border-boxを初期値として設定しておくことも多いです。
 
 

まとめ

まとめです。今回は、CSSの内部余白paddingタグの基本と注意点、外部余白marginとの違いを説明します。
 

CSSサンプル 内部余白100px
 

paddingの基本を使ったレイアウトの調整は、Webデザインする上で必須といえるくらいよく使うのでぜひ覚えておきましょう。
 

なお、CSSを使った装飾の仕方については「【CSSの基本】CSSの基本とプロパティ一覧」をご参照ください。
 

今回は以上になります。最後までご覧いただきありがとうございました。
 


弊社は、自分でホームページを作ることを推奨しています。「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら


 

検索して記事を見つけたい方はこちら

検索して記事を見つけたい方はこちらにキーワードを入力してお探しください。

おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【WordPressホームページの作り方総まとめ 12STEPで解説】

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

【2020年版WordPress(ワードプレス)の使い方総まとめ】

今回は、これからWordPress(ワードプレス)を使ってホームページまたはブログサイトを作りたい初心者の方向けに、WordPressの導入から使い方までまとめて説明していきます。 (※)WordPress5.0から実装された最新のブロックエディター(グーテンベルグエディター)にも対応しています。

-CSS
-

© 2020 WEBST8のブログ Powered by AFFINGER5