ボックスのパディング

パディングとは:

パディングはテキスト (コンテンツ) の外側と境界線 (境界線) の内側にあります。この領域を制御する最も単純なプロパティは、padding プロパティです。 padding 属性は、要素の境界線とそのコンテンツの間の空白を定義します。

CSS のパディング プロパティは、要素のパディングを定義します。パディング属性は長さの値またはパーセント値を受け入れますが、負の値は許可されません。

均一なパディングを設定することも、一方的なパディングを設定することもできます。たとえば、すべての h1 要素の両側に 10 ピクセルのパディングを設定したい場合は、次のようにします:

h1 {padding: 10px;}

両側にパディングを設定することもできます上、右、下、左の順で、各側で異なる単位またはパーセンテージ値を使用できます:

h1 {padding: 10px 0.25em 2ex 20%;}

特定の側のみにパディングを設定したい場合は、次の 4 つを通じてのみ行うことができます。属性:

padding-top

padding-right

padding-bottom

padding-left

名前の通り、わかりやすいですね。

数値の設定では、前に述べたようにさまざまな単位を使用できます。一般的に使用される単位はピクセル (px) とセンチメートル (cm) です。これは比較的単純です。簡単にテストしてください。 HTML ファイルにテーブルを書き込み、border 属性を追加します:

<table border="1">
    <tr>
        <td>
            正文
        </td>
    </tr>
</table>

これは設定前のページです:

以下では、

h1 {
    padding-left: 5cm;
    padding-right: 5cm;
    padding-top: 30px;
    padding-bottom: 30px;
}

HTML コードを CSS ファイルに追加し、次のように更新します。

<table border="1">
    <tr>
        <td>
            <h1>正文</h1>
        </td>
    </tr>
</table>

以下はエフェクトのスクリーンショットです:

操作している領域がテキストの外側で境界線内にあることがわかります。