CSS 要素の枠内の余白を指定するサンプル(padding)

nas

CSSの要素の枠内の余白を指定するサンプルです。
CSSのpaddingプロパティを使用します。

padding プロパティ

padding : 値　　→　上下左右を指定
padding : 値　値　　→　上下と左右を指定
padding : 値　値　値　　→　上と左右と下を指定
padding : 値　値　値　値　→　上と右と下と左を指定 (時計回りです)
値 説明
数値 + 単位   指定した単位で設定します。 
数値 + % 包含ブロックの幅に対する割合で設定します。
値を継承しない
  • 初期値は0です。
  • 要素の枠内の余白を指定します。ボーダーとコンテンツエリアの間です。(下の図の黄の部分)
  • ボーダーは、要素の周りにある線です。
  • マージンは、隣の要素と引き離すために使用します。
  • 以下はMDNのpaddingプロパティのリンクです。
    https://developer.mozilla.org/ja/docs/Web/CSS/padding

コード

サンプルのコードです。
3、6行目でpaddingを指定しています。

<style>
#test1{
	padding:5px;
}
#test2{
	padding:10px;
}
.c1 div{height:50px;width:200px;font-size:16px;
border: 1px solid #000;margin-bottom:10px;}
</style>
</head>
<body>
<div class="c1">
	<div id="test1">5px</div>
	<div id="test2">10px</div>
</div>
</body>
</html>

サンプル

上記コードのサンプルです。
緑色の部分がpaddingです。

paddingを個別に指定

paddingを個別に指定する方法です。

指定方法 意味
padding-top
例：padding-top:10px;		 上を指定
padding-right
例：padding-right:10px;		 右を指定
padding-bottom
例：padding-bottom:10px;		 下を指定
padding-left
例：padding-left:10px;		 左を指定

関連の記事

CSS 幅と高さを指定するサンプル(widthとheight)
CSS 最大の幅を指定するサンプル(max-width)
CSS 最小の幅を指定するサンプル(min-width)
CSS paddingとborderの表示方法を指定する(box-sizing)
CSS 要素の枠外の余白を指定するサンプル(margin)
CSS テーブルの枠線を重ねる/離すサンプル(border-collapse)
CSS テーブルの枠線の間隔を指定するサンプル(border-spacing)
CSS ボーダーの表示方法を指定するサンプル(border)

△上に戻る