代码如下：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> *{ margin:0; padding:0; } .box{ width:400px; height:400px; background:red; padding-top:1px; } .a{ height:100px; width:100px; background:green; margin-top:0px; margin-left:20px; /* (1)在这里，如果没有设置浮动，则margin-right无效。 (2)若要使margin-right生效，则浮动方向必须与margin-right一致 ，此时margin-left无效。 */ margin-bottom:-80px; } .b{ height:100px; width:100px; background:black; margin-top:100px; /*a的margin-bottom与b的margin-top如果都为正数或者 都为负数， 则a,b之间的垂直距离那个大，实际上便显示的是哪个 若其中只有有一个为负值，则看他们相加之后的值。 差值为正数，则就是b的顶部距离a的底部为那个差值。 差值为负数，则就是b在a的底部上升那个负数的绝对值。 */ } .foot{ width:400px; height:5px; background:blue; } </style> </head> <body> <div class=box> <div class="a"></div> <div class="b"></div> </div> <div class="foot"></div> </body> </html>
box最后的显示大小等于box的border及border内的大小加上正的margin值。而负的
margin值不会影响box的实际大小。如果是负的top或left值会引起box的向上或向左位置
移动。如果是bottom或right只会影响下面box的显示的参考线。
box的实际大小=box的物理大小+正的margin
即，