之前有写过一些layout的修改方式，也讲过如果DIV大小改的不好，整个layout就会走形。其实除了大小以外，margin 和 padding也会使到layout走位。

想象DIV是一个盒子，margin 和padding就是这个盒子的膜，margin是外面的膜 padding就是里面的。

margin和padding在网页设计上有着很大功能和功用，下面是比较普通的用法。


从上面的图来看，有margin跟没有margin的整体感觉是不同的，padding也是一样。但是，如果要改layout，一定要注意其他div的margin还有padding，要算清楚，不让他互相挤压。

上图蓝线padding，红线margin；container包着header, sidebar, content，他也是有padding的。他的padding压着其他DIV的margin，如果container 的padding和div本身的margin超过了容量大小，那么一些DIV就会被挤下来下面了，改的时候要小心。

现在我们来看看code怎样写，
通常我们都会在前面几行做global reset，把所有的margin和padding全部reset去0。

* {
padding: 0;
margin: 0;
}

这样做的目的是为了避免系统乱乱给那些没有设定margin padding的项目给任何数字，搞到失去控制。

margin和padding的写法都是一样的，下面就是他们的一些写法，

margin:10px;
这个代表那个DIV 4方的margin都是10px

margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
这个就是每一个方向都拥有自己的margin数字

margin:100px 50px;
这个呢，代表上面和下面100px，左右50px


margin:25px 50px 75px 100px;
这个有4个数字，只要跟着时钟方向，第一个是上面，第二个是右边，第三下面，第四左边。

除了放数字px，也可以放%，padding也一样。
margin还有一个很好用的功能，如果你把左边和右边的margin放auto，那么你的DIV就会align center了。code如下，
margin-right:auto;
margin-left:auto;

margin和padding差不多就只有这样，下次在写些blogger template的其他项目。

目录
http://gfishdiary.blogspot.com/2009/06/blogger-template.html