20131119

样式如下：

.red{ width:280px; height:200px; background:#FF0000; border:#000000 solid 2px;}

.blue{ width:170px; height:120px; background:#0000FF;border:#FFFFFF solid 2px;}
.red_top{ padding-top:10px;}
.red_right{padding-right:10px;}
.red_bottom{padding-botton:10px;}
.red_left{padding-left:10px;}
.blue_top{ margin-top:10px;}
.blue_right{ margin-right:10px;}
.blue_bottom{ margin-bottom:10px;}
.blue_left{ margin-left:10px;}

body{ color:#000000; font-size:10px;}

主要内容如下：

<div class="red red_top">
这行字距离上边框应为10px。
<div class="blue blue_top">
1.1这个盒子距离上行文字的距离应为10px。
</div>
</div>
<div class="red red_top">
这行字距离上边框应为10px。
<div class="blue blue_right" style="float:right;">
1.2这个盒子距离右边框的距离应为10px。为了看出效果加了向右的float属性。
</div>
</div>

<div class="red red_top">
这行字距离上边框应为10px。
<div class="blue blue_bottom">
1.3这个盒子距离下行文字的距离应为10px。
</div>
为了看出内部盒子下边距设置，故加了这行字
</div>
<div class="red red_top">
这行字距离上边框应为10px。
<div class="blue blue_left">
1.4这个盒子距离左边框的距离应为10px。
</div>
</div>
<div class="red red_right">
这行字距离右边框应为10px。为了看出效果，故多写一些文字。这么长应该行了吧。
<div class="blue blue_top">
2.1这个盒子距离上行文字的距离应为10px。
</div>
</div>
<div class="red red_right">
这行字距离右边框应为10px。为了看出效果，故多写一些文字。这么长应该行了吧。
<div class="blue blue_right" style="float:right;">
2.2这个盒子距离右边框的距离应为10px。为了看出效果加了向右的float属性。
</div>
</div>

<div class="red red_right">
这行字距离右边框应为10px。为了看出效果，故多写一些文字。这么长应该行了吧。
<div class="blue blue_bottom">
2.3这个盒子距离下行文字的距离应为10px。
</div>
为了看出内部盒子下边距设置，故加了这行字
</div>
<div class="red red_right">
这行字距离右边框应为10px。为了看出效果，故多写一些文字。这么长应该行了吧。
<div class="blue blue_left">
2.4这个盒子距离左边框的距离应为10px。
</div>
</div>
<div class="red red_bottom">

<div class="blue blue_top">
3.1这个盒子距离上行文字的距离应为10px。
</div>
这行字距离下边框应为10px。但是由于red盒子的height属性设置为了固定值,所以效果显示不出来。
</div>
<div class="red red_bottom">

<div class="blue blue_right" style="float:right;">
3.2这个盒子距离右边框的距离应为10px。为了看出效果加了向右的float属性。
</div>
这行字距离下边框应为10px。为了看出效果，文字添加在下面。由于浮动的关系,所以文字显示在blue盒子的左边。
</div>

<div class="red red_bottom">

<div class="blue blue_bottom">
3.3这个盒子距离下行文字的距离应为10px。
</div>
这行字距离下边框应为10px。但是由于red盒子的height属性设置为了固定值,所以效果显示不出来。
</div>
<div class="red red_bottom">

<div class="blue blue_left">
3.4这个盒子距离左边框的距离应为10px。
</div>
这行字距离下边框应为10px。但是由于red盒子的height属性设置为了固定值,所以效果显示不出来。
</div>
<div class="red red_left">
这行字距离上边框应为10px。
<div class="blue blue_top">
4.1这个盒子距离上行文字的距离应为10px。
</div>
</div>
<div class="red red_left">
这行字距离左边框应为10px。
<div class="blue blue_right" style="float:right;">
4.2这个盒子距离右边框的距离应为10px。为了看出效果加了向右的float属性。
</div>
</div>

<div class="red red_left">
这行字距离左边框应为10px。
<div class="blue blue_bottom">
4.3这个盒子距离下行文字的距离应为10px。
</div>
为了看出内部盒子下边距设置，故加了这行字
</div>
<div class="red red_left">
这行字距离左边框应为10px。
<div class="blue blue_left">
4.4这个盒子距离左边框的距离应为10px。ps：这时blue盒子的左边框距离red盒子的左边框的距离应为20px。
</div>
</div>

结果显示如下：