CSSパディング

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 つの値を指定できます。

えー

プログラムを実行して試してください

学び続ける

新しいファイル

<!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">这个文本填充两边相等。填充每边2厘米。</p> <p class="ex2">这个文本填充两边相等。填充每边2厘米。</p> </body> </html>

提出するリセットコード

自動運転