CSS属性のマージンの理解について話す

1.マージンとは何ですか?
マージンは、要素の周囲のスペースの間隔を制御するために使用され、視覚的にスペースの間隔の目的を実現します。前の要素に対して対応するマージンを持ちます。要素を区切るために使用されます。常に透明です。

2. 外側の余白をマージする問題（w3schoolを参照） --- 前提: 要素はドキュメントフロー内にある
2.1 2 つの垂直余白が交わる場合、それらの余白は垂直方向に重なり合い、最終的な余白は 2 つの余白のうち大きい方の値に等しくなります。
2.2 要素（境界線とパディングなし）に別の要素が含まれている場合、その要素は垂直方向に重なり合います。
2.3 要素が空の場合（余白なし）、その余白は重なり合う

3. ブロック要素とインライン要素のマージンの違い
ブロック要素のマージンは、ブロック要素の上、下、左、右に影響し、自由に制御できます。一方、インライン要素の場合は、水平方向の要素にのみ影響します。
注: img、input、textarea、select、button、label などの置き換え可能なインライン要素については、幅と高さを制御し、display: inline-block に変換できます。したがって、マージンも上下左右に制御できます。

4. マージンに関連する一般的なバグ
4.1 IE6 の二重マージン問題説明: 親要素に含まれる最初の要素がフローティング要素である場合、二重マージン問題が発生します。
解決策: display:inline
4.2 iIE6 フローティング要素 3px 間隔の問題の説明: 1 つのフローティング要素、もう 1 つは非フローティング要素で、非フローティング要素とフローティング要素の間に 3px の間隔があります。

5. パディングとマージンの違い
パディングは境界線の内側にあり、背景色を持ちます。主にコンテンツと要素を区別するために使用されます。マージンは境界線の外側にあり、背景色を持ちません。主に要素同士を区別するために使用され、分離の役割を果たします。

6. マージンのマイナスマージン問題（続く）
負のマージンを使用すると、多くの問題を解決できます。

参考文献
http://www.hicss.net/do-not-tell-me-you-understand-margin/
http://www.planabc.net/2007/03/18/css_attribute_margin/

<<: 入力ボックスのプレースホルダーテキストのデフォルトの色を変更する -webkit-input-placeholder メソッド

>>: Linuxネットワーク設定の基本操作コマンドを詳しく解説