CSSプロパティの説明: パディング

1. パディングとコンテナーのサイズの関係

ブロックの水平要素の場合: ① パディング値が異常になると、サイズに影響します。 ② 幅は自動ではなく、パディングはサイズに影響します。 auto または box-sizing は border-box であり、同時にパディング値が狂うことはなく、サイズに影響を与えません。

インライン水平要素の場合: 水平方向のパディングはサイズに影響しますが、垂直方向のパディングはサイズに影響しませんが、背景色に影響します。垂直パディングが大きすぎて親コンテナを超えると、scrollHeight に影響します。

2. 負の値とパーセンテージ値のパディング

負の値のパディングについて: パディングは負の値のいかなる形式もサポートしません。

パディングのパーセント値について: パディングのパーセントは、幅に対して相対的に計算されます。

インライン水平要素のパディングのパーセンテージ値は、①幅に対しても計算されます、②デフォルトの高さと幅の詳細は異なります、③パディングは改行します。

3. label要素の組み込みパディング

ol/ul list: ol/li要素にはpadding-leftが組み込まれていますが、単位はemではなくpxです。たとえば、Chromeブラウザは40pxです。フォント サイズが小さいと、間隔が非常に小さくなります。フォント サイズが大きすぎると、シリアル番号がコンテナからはみ出してしまいます。

経験が少ない: テキスト サイズが 12 ～ 14 ピクセルの場合、padding-left の値は 22 ～ 25 ピクセルの方が適切です。

その他の要素: ① すべてのブラウザには、input/textarea 入力ボックスに組み込みのパディングがあります。 ② すべてのブラウザには、ボタンのボタンに組み込みのパディングがあります。 ③ 一部のブラウザには、選択ドロップダウンに組み込みのパディングがあります。パディングを設定できる Firefox IE8+ など; ④ すべてのブラウザのラジオ/チェックボックスにはパディングが組み込まれていません。 ⑤ ボタン ボタン要素のパディングは制御が最も困難です。

ボタンフォームボタンパディング:

このため、ボタンを作成するときは、ボタンをシミュレートするために タグをよく使用します

4. パディングおよびグラフィックス 描画

5、パディングとレイアウト

パーセンテージ単位を使用して、固定比率のレイアウト構造を構築します:

マージンが等しい高さのレイアウトの場合:

2 列アダプティブ レイアウト:

以上がCSSプロパティの説明: パディングの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。