margin样式特殊，相邻的margin-left和margin-right不会重合，但相邻的margin-top和margin-bottom会产生重合(间距值选取值大的)。
所以如果对相邻的模块同时使用了margin-top和margin-bottom，边距会重合带来不必要的麻烦，所以最好统一使用margin-top或者margin-bottom，不要混合使用。从而降低出问题的风险。这不是技术上必须的，但却是一个良好的习惯。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>margin</title> <style> .mt20{ margin-top:20px} .mt60{ margin-top:60px} .mb80{ margin-bottom:80px} .mb20{ margin-bottom:20px} .ml20{margin-left:20px} .ml80{margin-left:80px} .mr20{margin-right:20px} .mr80{margin-right:80px} .title{border:1px dashed #B2BCC6; color:#0066CF; font-size:16px; font-weight:bold} .test {border:1px solid #069;} </style> </head> <body> <h2 class="title mt20 mb80">margin-top与margin-bottom合并，间距值为最大的</h2> <h2 class="title mt20">margin-top与margin-bottom合并</h2> <h2 class="title mt60">margin-top与margin-bottom合并</h2> <div> <a class="ml20 mr80 test">margin-left与margin-right不合并</a> <a class="ml20 mr80 test">margin-left与margin-right不合并</a> </div> </body> </html>
