iPentec.com  /  Doc  /  CSS

目次

領域の内側に余白を取る - CSS padding プロパティの利用 - CSS

CSSを利用して、領域の内側に余白を取るコードを紹介します。

概要

領域の内側に余白を取る場合は、padding プロパティを利用します。上下左右のマージンを個別に設定する場合は、padding-left, padding-top, padding-right, padding-bottom プロパティも利用できます。

書式

padding: (パディングのサイズ)

padding: (上下パディングのサイズ) (左右パディングのサイズ)

padding: (上パディングのサイズ) (左右パディングのサイズ) (下パディングのサイズ)

padding: (上パディングのサイズ) (左右パディングのサイズ) (下パディングのサイズ)

padding: (上パディングのサイズ) (右パディングのサイズ) (下パディングのサイズ) (左パディングのサイズ)

書式 (上下左右を指定する場合)

左パディングを指定する

padding-left: (左パディングのサイズ)

右パディングを指定する

padding-right: (右パディングのサイズ)

上パディングを指定する

padding-top: (上パディングのサイズ)

下パディングを指定する

padding-bottom: (下パディングのサイズ)

解説

paddingプロパティを用いた場合は上下左右の余白を一括で設定できます。上下左右それぞれの余白を設定する場合は、padding-top, padding-bottom, padding-left, padding-right プロパティが用意されています。
プロパティ名設定
padding上下左右の領域の内側の余白を設定します。
padding-top上の領域の内側の余白を設定します。
padding-bottom下の領域の内側の余白を設定します。
padding-left左の領域の内側の余白を設定します。
padding-right右の領域の内側の余白を設定します。

複数の値を与えた場合の動作

paddingプロパティには、複数の値を設定できます。値の個数と設定内容は以下の表のとおりです。
padding:(サイズ)上下左右に指定したサイズの余白を設定します。
padding:(サイズ1) (サイズ2)上下を(サイズ1)、左右を(サイズ2)の余白を設定します。
padding:(サイズ1) (サイズ2) (サイズ3)上を(サイズ1)、左右を(サイズ2)、下を(サイズ3)の余白に設定します。
padding:(サイズ1) (サイズ2) (サイズ3) (サイズ4)上を(サイズ1)、右を(サイズ2)、下を(サイズ3)、左を(サイズ4)の余白に設定します。

パディングのサイズ指定

以下の指定方法があります。
書式記述例説明
単位数値+単位margin:4px指定した数値の単位で指定します。
%数値+%margin:2%画面のサイズに対する%で指定します。
autoautomargin:auto自動とします

使える単位の一覧

値説明例
pxピクセルmargin:20px
em"M"の高さを基準とした大きさmargin:2em
ex"x"の高さを基準とした大きさmargin:3ex
mmミリメートルmargin:10mm
cmセンチメートルmargin:2cm
inインチmargin:4in
ptポイントmargin:2pt
pcパイカmargin:1pc

書式例

.PaddingFrame {
  padding-top:2em;
  padding-left:4em;
}

.PaddingFrame {
  padding:8px 8px 16px 32px;
}

コード例1

コード

下記のコードを記述します。
SimplePadding01.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" type="text/css" href="SimplePadding01.css" />
</head>
<body>
  <div class="BaseCanvas">
    <div class="PaddingFrame">テキストです。ZYXWVVUTS、いろはにほへと。</div>
  </div>
</body>
</html>
SimplePadding01.css
.BaseCanvas {
  margin: 32px 32px 0 32px;
  width: calc(100%-64px);
  height: 320px;
  background-color: #E0E0E0;
  border: solid 1px #202020;
}

.PaddingFrame {
  padding: 16px 24px 8px 64px;
  width: 160px;
  background-color: #affff8;
  border: solid 1px #0076cf;
}

解説

PaddingFrameでPaddingプロパティの動作を確認します。"padding: 16px 24px 8px 64px;" が記述されていますので、PaddingFrameは上部の内側に16pxの余白を開け、右側の内側に24px、下部の内側に8px、左側の内側に64pxの余白を開ける動作となります。

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
水色の枠(PaddingFrame)の内部、外の枠線からテキストの位置までの左側の余白が64ピクセル。上側の余白が16ピクセル、右側の余白が24ピクセル、下側の余白が24ピクセル開いていることが確認できます。また、水色の枠(PaddingFrame)にはmargin を設定していないため、外の灰色の枠(BaseCanvas)と、水色の枠(PaddingFrame)との間には余白が開きません。


コード例2-1

コード

下記のコードを記述します。
MarginPadding01.css
body {
  margin:0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}

.OutFrame {
  border: solid 4px #0000FF;
  width:640px;
  height:320px;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}

.SimpleMargin{
  border: solid 1px #808080;
  width:280px;
  height:160px;
  margin: 16px 16px 16px 16px;
  padding: 32px 32px 32px 32px;
}
MarginPadding01.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="MarginPadding01.css" />
</head>
<body>
    <div class="OutFrame">
    <div class="SimpleMargin">フレームです <br />
        あいうえおかきくけこさしすせそたちつてとなににぬねのはひふへのまみむめもやゆろらりるれろわをん        
    </div>
    </div>
</body>
</html>

表示結果

HTMLファイルを表示すると下図の画面が表示されます。領域の枠線と内側の文字の間の上下左右に32pixelの余白が設定されます。
下側はコンテンツの領域が高さよりも短いため、32pixel以上の余白が開いています。

コード例2-2

コード

先ほどの例のコードを下記のコードに変更します。
MarginPadding02.css
body {
  margin:0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}

.OutFrame {
  border: solid 4px #0000FF;
  width:640px;
  height:320px;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}

.SimpleMargin{
  border: solid 1px #808080;
  width: 280px;
  height: 160px;
  
  margin: 16px 16px 16px 16px;
  padding: 32px 32px 32px 64px;
}
MarginPadding02.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="MarginPadding02.css" />
</head>
<body>
    <div class="OutFrame">
    <div class="SimpleMargin">フレームです <br />
        あいうえおかきくけこさしすせそたちつてとなににぬねのはひふへのまみむめもやゆろらりるれろわをん        
    </div>
    </div>
</body>
</html>

表示結果

HTMLファイルを表示すると下図の画面が表示されます。 領域の枠線と内側の文字の間の上部、下部、右側に32pixel、左側に64pixelの余白が設定されます。 先の例と比較すると枠の横幅が長くなっていることがわかります。 枠の幅は"widthプロパティの値"+"padding-leftで設定したサイズ"+"padding-rightで設定したサイズ"になります。

padding と width,heightのサイズ

例1:コード

下記のコードを記述します。
SimplePadding02-1.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" type="text/css" href="SimplePadding02-1.css" />
</head>
<body>
  <div class="BaseCanvas">
    <div class="PaddingFrame">Paddingプロパティは領域の内部の余白を設定できます。</div>
  </div>
</body>
</html>
SimplePadding02-1.css
.BaseCanvas {
  margin: 32px 32px 0 32px;
  width: calc(100%-64px);
  height: 320px;
  background-color: #E0E0E0;
  border: solid 1px #202020;
}

.PaddingFrame {
  padding: 16px 64px 16px 64px;
  width: 128px;
  background-color: #affff8;
  border: solid 1px #0076cf;
}
上記のHTMLファイルをWebブラウザで開きます。下図の画面が表示されます。
水色の枠の幅が、widthプロパティで設定された128ピクセルより広くなっていることが確認できます。枠全体の幅はwidthプロパティの値と、padding-left の値、padding-right の値を足したものになります。


コードを下記に変更します。先ほどのコードから、PaddingFrameのwidthのプロパティを48pxに変更しています。
SimplePadding02-2.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" type="text/css" href="SimplePadding02-2.css" />
</head>
<body>
  <div class="BaseCanvas">
    <div class="PaddingFrame">Paddingプロパティは領域の内部の余白を設定できます。</div>
  </div>
</body>
</html>
SimplePadding02-2.css
.BaseCanvas {
  margin: 32px 32px 0 32px;
  width: calc(100%-64px);
  height: 320px;
  background-color: #E0E0E0;
  border: solid 1px #202020;
}

.PaddingFrame {
  padding: 16px 64px 16px 64px;
  width: 48px;
  background-color: #affff8;
  border: solid 1px #0076cf;
}

変更後のHTMLファイルをWebブラウザで表示すると下図の画面が表示されます。先と同様に、padding-left の値、padding-right の値、width の値を足した幅が枠全体の幅になります。


例2:コード

下記のコードを記述します。padding-top, padding-bottomを指定し、heightプロパティが設定されているコードになります。
SimplePadding03.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" type="text/css" href="SimplePadding03.css" />
</head>
<body>
  <div class="BaseCanvas">
    <div class="PaddingFrame">Paddingプロパティは領域の内部の余白を設定できます。</div>
  </div>
</body>
</html>
SimplePadding03.css
.BaseCanvas {
  margin: 32px 32px 0 32px;
  width: calc(100%-64px);
  height: 320px;
  background-color: #E0E0E0;
  border: solid 1px #202020;
}

.PaddingFrame {
  padding: 48px 16px 64px 16px;
  width: 340px;
  height:48px;
  background-color: #affff8;
  border: solid 1px #0076cf;
}

上記のHTMLをWebブラウザで表示すると下図の画面が表示されます。枠の高さは、heightプロパティの値と、padding-top, padding-bottom の値を加算したものになります。

著者
とりっち
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。

関連するページ

掲載日: 2017-10-04
改訂日: 2023-03-05
ドキュメント
新着記事一覧
タグ一覧
ドキュメント トップ
SNSコンテンツ
YouTube
Instagram
Pinterest
X
iPentec
プライバシー
iPentecについて
iPentec all rights reserverd.