margin是我们在进行CSS布局中非常常用属性的但如果运用不得当往往会产生过多垃圾代码让我们编码体积不断增加今天我们介绍种编码优化小例子通过此例希望大家能意识到代码优化途径是多种多样也算是个抛砖引玉引子吧

看XHTML代码:

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
<div id=\"\">
     <div id=\"body1\">
          <div id=\"content1\">
          </div>
     </div>
     <div id=\"body2\">
     </div>
<div>


看下面CSS代码:(未优化)

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
# {
     margin:5px 0px 5px 0px;
}
#body1 {
     margin:12px 0px 10px 0px;
}
#content {
     margin:8px 0px 2px 0px;
}
#body2 {
     margin:10px 0px 15px 0px;
}


　　我本人(52css.com)不使用Dreamweaver进行开发在我看来用Dreamweaver进行设置CSS应该是属于这类它是未优化很多代码都是多余软件Software毕竟是软件Software目前还没有能替人作些研究我们对上面CSS进行优化

看下面经过优化CSS代码:

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
# {}
#body1 {
     margin-top:17px ;
}
#content {
     margin:8px 0px 2px 0px;
}
#body2 {
     margin:20px 0px ;
}


　　我们来分析下优化思路:首先#{margin:5px 0px 5px 0px;}是没有必要他无非定义就是整个页面上、下外边距(在定场合下却需要这样书写)我们同样可以通过定义#body1上边距和#body2下边距来设置所以才有了#body1{margin-top:17px ;}和#body2{margin:20px 0px ;}(这里定义是#body2上下边距为20px左右边距为0px也是缩写种方式)同理于是我们可以省略了#body1下边距在#content层在定义上边距另外大家还需要先弄清楚层嵌套关系否则容易让你思路非常不清晰