CSSのパディングとマージンの違い

CSS では、マージンとは、その境界線から別のコンテナーの境界線までの距離、つまりコンテナーの外側の距離を指します。 CSS では、パディングとは、自身のフレームとその内部の別のコンテナの境界線との間の距離、つまりコンテナ内の距離を指します。

以下はpaddingとmarginの一般的な使い方を説明します

1.padding

1.構文構造

(1)padding-left: 10px; 左内側マージン

(2)padding- right :10px; 右のパディング

(3) padding-top:10px; 上部のパディング

(4) padding-bottom: 10px; 下のパディング

(5) 4 つの辺の距離はすべて同じです。

(6) パディング: 10px 20px; 上、下、左、右のパディング

(7) パディング: 10px 20px 30px;

(8) パディング: 10px 20px 30px 40px;下、左のパディング

2、可能な値

(1) length はパディングの長さを特定の単位で指定します

(2) % 親要素の幅に基づくパディングの長さ

(3) ) auto ブラウザはパディングを計算します

(4) 継承は、パディングが親要素から継承されることを規定します

3. ブラウザの互換性の問題

(1) すべてのブラウザはパディング属性をサポートします

(2) IE のどのバージョンでも、属性値 "inherit" をサポートしていません

2、margin

1、構文構造

(1) margin-left: 10px; left external margin

(2 ) margin-right : 10px; 右マージン

(3) margin-top: 10px; 上マージン

(4) margin-bottom: 10px; 下マージン

(5) margin: 10px;

(6) 余白: 10px 20px; 上、下、左、右の余白

(7) 余白: 10px 20px 30px;

(8) 余白: 10px 20px 30px 40px; 、下と左のマージン

2. 可能な値

(1) length はマージンの長さを特定の単位で指定します

(2) % 親の幅に基づくマージンの長さelement

( 3) auto ブラウザがマージンを計算します

(4) extend はマージンが親要素から継承されることを規定します

3. ブラウザの互換性の問題

(1) すべてのブラウザは margin 属性をサポートします

(2) IE のどのバージョンでも "inherit" 属性値がサポートされています

3. margin と Padding の違いは図で表されます

以上がCSSのパディングとマージンの違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。