Merge pull request #54 from jigintern/fix-html-css

🚑 marginの相殺について修正

html-css/DOCS.md

@@ -599,10 +599,16 @@ CSSで表現できるものはすべてボックス、四角形の領域を持
   <summary>margin</summary>
 
   Margin Box の大きさはいわば額と額の間の距離です。HTML的には要素間の間隔・距離になります。  
-  つまり2つの要素から別々に指定したりもできてしまいます。(通常、Aに16pxのmargin、Bに32pxのmarginを指定するとA-B間の間隔は48pxあることになります。)  
+  つまり2つの要素から別々に指定したりもできてしまいます。  
   これだと要素間の間隔に計算が必要なので、レイアウトによりますが、上下左右ではなく上と左のみ、下と右のみなど指定を工夫することでわかりやすくなると思います。
 
   また、marginはコンテンツの大きさに影響を与えないため、box-sizingには margin-box が存在しません。
+
+> ちなみに、Aに16pxのmargin、Bに32pxのmarginを指定するとA-B間の間隔は値の相殺が行われて32pxとなります。  
+> この相殺は要素と要素が兄弟として扱える場合や要素の一番目の子要素のmargin-top、要素の最後の子要素のmargin-bottomなどに適用されます。  
+> このような複雑な条件のもと要素間の間隔を計算しなければならないため、指定の工夫が有効なのです。  
+> より詳細には [マージンの相殺の習得 - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing) などを参照してください。
+
 </details>
 
 <details>