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

HTML要素の内側に余白をつけるには、padding:100px;のようにpaddingを指定します。

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

内側余白 paddingタグの使い方

内側余白 paddingの基本

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

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

■表示例

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>はじめてのCSSセミナー</title>
  </head>
  <body>
    <div style="padding:100px;border:5px green solid;">
      内部余白100pxになっています。
    </div>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>はじめてのCSSセミナー</title>

</head>

<body>

内部余白100pxになっています。

</div>

</body>

</html>

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

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-方向」プロパティを利用すれば、方向を指定して個々に設定できます。

項目	内容
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)があります。

値の指定方法は、基本的に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の外部余白

関連【初心者向け】CSS 外部余白marginタグの使い方の基本を解説

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

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

<div>や<a>などの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については上下左右設定できますがブロックレベル要素のように正しく余白が取れません。

項目

主な要素

特徴

ブロックレベル要素

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」を指定する方法があります。

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

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

■表示例

■上記のソースコード

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <link rel="stylesheet" href="style.css">
    <style media="screen">
      .box1{
        background:skyblue;
        width:400px;
        height:300px;
        padding: 100px;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <div class="box1">
      横幅400 x 高さ300pxのボックス
    </div>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

.box1{

background:skyblue;

width:400px;

height:300px;

padding: 100px;

box-sizing: border-box;

}

</style>

</head>

<body>

横幅400 x 高さ300pxのボックス

</div>

</body>

</html>

幅や枠線を揃えたい・微調整したい場合に必要になるので覚えておきましょう。

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

まとめ

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

HTML要素の内側に余白をつけるには、padding:100px;のようにpaddingを指定します。

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

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

合わせて読みたい記事

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。

教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました！

最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。

YouTubeチャンネルはこちら

『自分で作る選択を』
自分でホームページ作成・Web集客したいホームページ作成スクール・教室

YouTubeチャンネル

個別指導Webスクール

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

内側余白 paddingタグの使い方

内側余白 paddingの基本

padding-方向で要素の特定方向の余白を指定する方法

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

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

padding設定時のボックス大きさの算出計算border-box

まとめ

YouTubeチャンネル開設しました！

検索して記事を見つける

【初心者向け】CSSセレクタの種類や指定方法を徹底解説

【構造化データとは？】メリットやタイプ・基本的な書き方を解説

【HTMLセマンティック要素とは】意味付けされた要素・意味と使い方

HTML改行タグbrの使い方・文中に改行を入れる方法

【Sass入門】導入方法やSCSS記法の基本的な書き方

WEBST8のコードブログ