CSSのマージン、ボーダー、パディングの違い

CSSのpadding margin borderプロパティの詳しい説明

CSS パディング、マージン、ボーダーのプロパティの図

W3C 組織は、Web ページ上のすべてのオブジェクトをボックスに配置することを推奨しています。これらのオブジェクトには段落、リストが含まれます。 、タイトル、画像、レイヤー。ボックス モデルは主に、コンテンツ、パディング、ボーダー、マージンの 4 つの領域を定義します。初心者にとっては、margin、background-color、background-image、padding、content、border のレベル、関係、相互影響について混乱することがよくあります。ここにボックス モデルの 3D 模式図を示します。理解しやすく、覚えやすくなると思います。

リーリー

次に、HTML と CSS の鍵であるボックス モデルについて説明します。 Box モデルを理解する鍵となるのは、margin 属性とpadding 属性であり、これら 2 つの属性を正しく理解することは、CSS レイアウトの使用方法を学ぶ鍵でもあります。

注: なぜマージンとパディングを翻訳しないのでしょうか?
理由 1: 中国語には対応する単語がありません。
理由 2: たとえそのような単語があったとしても、CSS コードを記述するときには常にマージンとパディングを使用する必要があります。中国語で説明すると、実際のアプリケーションではマージンとパディングの概念が混同されやすいです。

HTML の基本的な知識がある場合は、p、h1~h6、br、div、li、ul、img などのいくつかの基本要素 (Elements) を知っている必要があります。これらの要素を細分化すると、トップレベル要素、ブロックレベル要素、インライン要素に分割できます。

ブロックレベルの要素は、HTML を構成する主要な要素であり、あらゆるブロックレベルの要素は Box モデルを使用して説明できます。
ボックス モデル: ブロック レベルの要素は、コンテンツ、パディング、背景 (背景色と画像を含む)、境界線、マージンの 5 つの部分で構成されます。
三次元ビューは次のとおりです:

間取りは以下の通りです

上の 2 つの写真に基づいて、誰もが Box モデルを直感的に理解できると思います。

マージンとパディングの属性については以下で説明します:
1. Margin: margin-top、margin-right、margin-bottom、margin-left が含まれます。ブロックレベルの要素間の距離を制御します。これらは透明かつ非表示です。 。上、右、下、左の時計回りのルールに従って、マージンとして書くことができます: 40px 40px 40px 40px;
簡単に覚えられるように、下の図を参照してください:

上下左右のマージン値が同じ場合は以下のように省略できます

リーリー

最初の 40 ピクセルは上下のマージン値を表し、後の 40 ピクセルは左右のマージン値を表します。
上下左右のマージン値が一致している場合、次のように省略できます:

リーリー

2. Padding:padding-top、padding-bottom、padding-left が含まれます。ブロックレベルの要素、コンテンツ、境界線間の距離を制御します。そのコードについては、margin 属性の記述を参照してください。略語。

この時点で、margin 属性とpadding 属性の基本的な使用法をほぼ理解しました。ただし、実際のアプリケーションでは、理解できないことが常にあり、それらは多かれ少なかれマージンに関連しています。

注: 2 つの要素の内容を垂直方向に分離したい場合は、padding-top/bottom または margin-top/bottom を選択できます。ここでは、

Ruthless は可能な限り、padding- を使用することをお勧めします。これはCSSにCollapsing margins（余白が潰れる）という現象があるためです。

マージンの崩壊: マージンの崩壊という現象は、隣接する要素または下位要素の垂直マージンにのみ存在します。

詳細は次のとおりです。

1 つだけ指定されている場合は、4 つの側面すべてに使用されます。
2 つ指定されている場合は、1 つ目は上下用、2 つ目は左右用です。 3 つが提供され、1 つは上、2 つ目は左-右、3 つ目は下です。 4 つのパラメータ値がすべて提供されている場合、上-右の順に 4 つの側面に作用します。 -左下。


リーリー

元のリンク: http://www.cnblogs.com/linjiqin/p/3556497.html