?<style> ???????* { ???????????margin: 0; ???????????padding: 0; ???????????color: #fff; ???????????font-size：12px; ???????} ???????body { ???????????background: grey; ???????} ???????body>div { ???????????width: 550px; ???????????height: 120px; ???????????background: blue; ???????????margin-top: 5px; ???????} ???????.parent1:after { ???????????clear: both; ???????????width: 0; ???????????height: 0; ???????????content: ‘‘; ???????????display: block; ???????????visibility: hidden; ???????} ???????.parent { ???????????position: relative; ???????} ???????.parent>div { ???????????width: 100px; ???????????height: 30px; ???????????background: orange; ???????} ???????.parent1>div { ???????????float: left; ???????} ???????.parent1 span { ???????????width: 40px; ???????????height: 60px; ???????????background: red; ???????????position: absolute; ???????????left: 120px; ???????????top: 50px; ???????} ???????.parent1 .child { ???????????margin: 10px 20px; ???????} ???????.parent2 .child { ???????????margin: 10px 20px; ???????} ???????.parent2 span { ???????????width: 100px; ???????????height: 10px; ???????????background: red; ???????????position: absolute; ???????????left: 120px; ???????????top: 30px; ???????????text-align: right; ???????} ??????.parent3 .child1 { ???????????margin-bottom:10px; ???????} ??????????????.parent3 .child2 { ???????????margin-top:20px; ???????} ???????.parent3 span { ???????????width: 100px; ???????????height: 20px; ???????????background: red; ???????????position: absolute; ???????????left: 100px; ???????????top: 30px; ???????????text-align: right; ???????} ???????.parent4 { ???????????padding: 10px; ???????} ???????.parent4 .child { ???????????margin: 10px; ???????} ???????.parent4 span { ???????????width: 20px; ???????????height: 60px; ???????????background: red; ???????????position: absolute; ???????????left: 0; ???????????top: 50px; ???????} ???</style></head><body> ???<div class="parent parent1"> ???????<div class="child">margin-left:10px;</div> ???????<div class="child">margin-rihgt:10px;</div> ???????<h3>水平结构</h3> ???????<span>宽度40px</span> ???</div> ???<div class="parent parent2"> ???????<div class="child">margin-bottom:10px;</div> ???????<div class="child">margin-top:10px;</div> ???????<h3>垂直结构</h3> ???????<span>高度10px</span> ???</div> ???<div class="parent parent3"> ???????<div class="child child1">margin-bottom:10px;</div> ???????<div class="child child2">margin-top:20px;</div> ???????<h3>垂直结构</h3> ???????<span>高度20px</span> ???</div> ???<div class="parent parent4"> ???????<div class="child">包含结构</div> ????<h3> ?包含结构 父元素padding-rihgt:10px;子元素margin-left:10px;</h3> ???????<span>红色20px</span> ???</div></body></html>
结论:
1：水平结构第一个盒子的 右边距等于 左边盒子的margin-right +右边盒子的margin-left;【相加】
2：垂直结构第一个盒子的 下边距等于 上边盒子的margin-bottom和下边盒子的margin-top比较一下，【取最大值】
3：包含结构子元素的margin-left 等于父元素的padding-rihgt +子元素的margin-left 【margin+padding相加】
CSS div的三种结构水平垂直包含margin的计算
原文地址：http://www.cnblogs.com/xingkongly/p/7531330.html