CSSパディング


CSS パディング

CSS Padding プロパティは、要素の境界線とそのコンテンツの間のスペースを定義します。

パディング

要素のパディング (パディング) がクリアされると、「解放された」領域は要素の背景色で塗りつぶされます。

上下左右のパディングを変更するには、fill 属性を単独で使用します。略語の塗りつぶし属性も使用でき、変更するとすべてが変わります。

VlwVi.png

可能な値

値 説明
length 固定パディング (ピクセル、pt、em など) を定義します
% パーセント値を使用して定義します1個で満腹

Padding - 片面パディング属性

CSS では、異なる側に異なるパディングを指定できます:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style>
p
{
	background-color:yellow;
}
p.padding
{
	padding-top:25px;
	padding-bottom:25px;
	padding-right:50px;
	padding-left:50px;
}
</style>
</head>

<body>
<p>This is a paragraph with no specified padding.</p>
<p class="padding">This is a paragraph with specified paddings.</p>
</body>

</html>

Run Example»

オンラインの例を表示するには、[Run Example] ボタンをクリックします。

説明:

  • 上のパディングは25pxです

  • 右のパディングは50pxです

  • 下のパディングは25pxです

  • 左のパディングは50pxですpx

パディング- 短縮プロパティ

コードを短縮するために、すべてのパディング プロパティを 1 つのプロパティで指定できます。

これはいわゆる略語属性です。すべてのパディング プロパティの略称プロパティは "padding" です:

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style>
p
{
	background-color:yellow;
}
p.padding
{
	padding:25px 50px;
}
</style>
</head>

<body>
<p>This is a paragraph with no specified padding.</p>
<p class="padding">This is a paragraph with specified paddings.</p>
</body>

</html>

インスタンスの実行 »

オンライン インスタンスを表示するには、[インスタンスの実行] ボタンをクリックします

Padding プロパティ。 4つの値。

パディング: 25px 50px 75px 100px;

  • 上部のパディングは25px

  • 右側のパディングは50px

  • 下部のパディングは75px

  • 左のパディングは 100px です

パディング: 25px 50px 75px;

  • 上のパディングは25pxです

  • 左右のパディングは50pxです

  • 下のパディングは75pxです

パディング: 25px 50px ;

  • 上下のパディングは 25px

  • 左右のパディングは 50px

Padding: 25px;

例: ステートメント内 設定されたすべてのプロパティ 
  • <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style>
p.ex1 {padding:2cm;}
p.ex2 {padding:0.5cm 3cm;}
</style>
</head>

<body>
<p class="ex1">This text has equal padding on each side. The padding on each side is 2cm.</p>
<p class="ex2">This text has a top and bottom padding of 0.5cm and a left and right padding of 3cm.</p>
</body>
</html>

    • 例を実行する »

をクリックしてください[例の実行] ボタンをクリックすると、オンラインの例が表示されます

この例では、省略属性を使用して、ステートメント内に設定されたすべてのプロパティ (1 から 4 つの値を持つことができる) を設定する方法を示します。

例: 左パディングの設定

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style>
p.padding {padding-left:2cm;}
p.padding2 {padding-left:50%;}
</style>
</head>

<body>
<p>This is a text with no left padding.</p>
<p class="padding">This text has a left padding of 2 cm.</p>
<p class="padding2">This text has a left padding of 50%.</p>
</body>
</html>

サンプルの実行 »
オンラインサンプルを表示するには、「サンプルの実行」ボタンをクリックしてください
この例は、要素の左パディングを設定する方法を示します。

インスタンス: 適切なパディングを設定します

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style>
p.padding {padding-right:2cm;}
p.padding2 {padding-right:50%;}
</style>
</head>

<body>
<p>This is a text with no right padding. This is a text with no right padding. This is a text with no right padding.</p>
<p class="padding">This text has a right padding of 2 cm. This text has a right padding of 2 cm. This text has a right padding of 2 cm.</p>
<p class="padding2">This text has a right padding of 50%. This text has a right padding of 50%. This text has a right padding of 50%.</p>
</body>
</html>

インスタンスを実行します »
「インスタンスを実行」ボタンをクリックしてオンラインインスタンスを表示します

この例は、要素の適切なパディングを設定する方法を示しています。

例: 上部パディングの設定

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style>
p.padding {padding-top:2cm;}
p.padding2 {padding-top:50%;}
</style>
</head>

<body>
<p>This is a text with no top padding. This is a text with no top padding. This is a text with no top padding.</p>
<p class="padding">This text has a top padding of 2 cm. This text has a top padding of 2 cm. This text has a top padding of 2 cm.</p>
<p class="padding2">This text has a top padding of 50%. This text has a top padding of 50%. This text has a top padding of 50%.</p>
</body>
</html>

例の実行 »

オンライン例を表示するには、[例を実行] ボタンをクリックしてください

この例では、要素に上部パディングを設定する方法を示します。

例: 下部パディングの設定

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style>
p.padding {padding-bottom:2cm;}
p.padding2 {padding-bottom:50%;}
</style>
</head>

<body>
<p>This is a text with no bottom padding. This is a text with no bottom padding. This is a text with no bottom padding.</p>
<p class="padding">This text has a bottom padding of 2 cm. This text has a bottom padding of 2 cm. This text has a bottom padding of 2 cm.</p>
<p class="padding2">This text has a bottom padding of 50%. This text has a bottom padding of 50%. This text has a bottom padding of 50%.</p>
</body>
</html>

例の実行 »

オンライン例を表示するには、[例を実行] ボタンをクリックしてください

この例は、要素の下部パディングを設定する方法を示します。

すべての CSS パディング プロパティ

プロパティ 説明
padding 省略された属性を使用して、1 つの宣言ですべてのパディング プロパティを設定します
パディング - ボトム を設定します要素のbottom-padding
padding-left要素のleft-paddingを設定
padding-right要素のright-paddingを設定
padding-top セット要素の上部のパディング
←
→