CSS Padding
CSS Padding プロパティは、要素の境界線とそのコンテンツの間のスペースを定義します。
Padding
要素のPadding(パディング)がクリアされると、「解放された」領域は要素の背景色で塗りつぶされます。
上下左右のパディングを変更するには、fill 属性を単独で使用します。略語の塗りつぶし属性も使用でき、変更するとすべてが変わります。
Padding プロパティの値 (ピクセル、センチメートル、パーセンテージ) %
CSS パディング プロパティ
プロパティ | 説明 |
---|---|
padding | 略語を使用すべてを 1 つのステートメントで設定するためのプロパティ Padding プロパティ |
padding-bottom | 要素の下のパディングを設定します |
padding-left | 要素の左のパディングを設定します |
padding-right | 要素の右のパディングを設定します |
padding-top | 要素の上部のパディングを設定します |
CSS では、異なる側面に異なるパディングを指定できます:
例
<!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>这是一段没有指定填充。</p> <p class="padding">这一段指定l填充。</p> </body> </html>
プログラムを実行して試してみましょう
パディング - 短縮属性
コードを短縮するには、属性で指定されたすべてのパディング プロパティで実行できます。
これはいわゆる略語属性です。すべてのパディング プロパティの略語は「padding」:
Padding プロパティで、1 ~ 4 つの値を指定できます。
パディング: 25px 50px 75px 100px;
上のパディングは25px
右のパディングは50px
下のパディングは75px
左のパディングは100px
パディング: 25px 50p x 75 ピクセル;
上部のパディングは 25 ピクセルです
左右のパディングは50pxです
下のパディングは75pxです
padding:25px 50px;
上下のパディングは25pxです
左右のパディングは50pxです
padding:25px;
すべてのパディングは 25px です
例
<!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>这是一段没有指定填充。</p> <p class="padding">这一段指定l填充。</p> </body> </html>
プログラムを実行して試してみましょう
例
すべてを設定するための省略された属性の使用を示します宣言内のパディングプロパティ、 1 ~ 4 つの値を指定できます。
えープログラムを実行して試してください