资源描述：
《CSS bx盒子模型详细解释(margin,panding的区别).doc》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。
1、CSSmargin,padding详解BoxModel详细图解2009年08月13日星期四05:57P.M.AboutBoxModel:一个块级元素由content,padding,background,border,margin五个部分组成.立体图1如下:THECSSBOXMODEL:平面图2如下:根据以上两图,相信大家对于Boxmodel会有个直观的认识.以下说明margin和padding属性:1.Margin:包括margin-top,margin-right,margin-bottom,margin-left,控制块级元素之间的距离,它们
2、是透明不可见的,对于2所示的上右下左margin值均为40px,因此代码为:margin-top:40px;margin-right:40px;margin-bottom:40px;margin-left:40px;根据上,右,下,左的顺时针规则,简写为margin:40px40px40px40px;为便于记忆,请参考下图3:当上下,左右margin值分别一致,可简写为:margin:40px40px;前一个40px代表上下margin值,后一个40px代表左右margin值.当上下左右margin值均一致,可简写为:margin:40px; 2
3、.Padding:包括padding-top,padding-right,padding-bottom,padding-left,控制块级元素内部,content与border之间的距离,其代码与margin属性的写法比较类似.至此,已经基本了解margin和padding属性的基本用法.但是,在实际应用中,却总是发生一些让你琢磨不透的事,而它们又或多或少的与margin有关.***************************************************************************************
4、**********注:当你想让两个元素的content在垂直方向(vertically)分隔时,既可以选择padding-top/bottom,也可以选择margin-top/bottom,建议你尽量使用padding-top/bottom来达到你的目的,这是因为css中存在Collapsingmargins(折叠的margins)的现象.Collapsingmargins:margins折叠现象只存在于临近或有从属关系的元素,垂直方向的margin中.文字说明可能让人费解,下面用一个例子说明margin-collapsing现象.例:在html
5、文件的
之间写入如下代码:
MarginsofID1andID2collapsevertically.
元素ID1与ID2的margins在垂直方向折叠. 在与其外联的css文件中写入:*{padding:0;margin:0;}#ID1{background-color:#333; //背景色color:#FFF; //字体色margin-top:10px;margin-bottom:10px
6、;}#ID2{font:normal14px/1.5Verdana,sans-serif;margin-top:30px;margin-bottom:30px;border:1pxsolid#F00;}代码解释:1.在html写入的代码表示,在html中插入id分别为ID1和ID2的两个块级元素div,h1;2.*{padding:0;margin:0;}:使浏览器默认的元素padding和margin值均归零;3.#ID1{…}:使id为ID1的元素div的背景颜色为#333,字体颜色为#FFF,margin-top/bottom为10px;4.
7、#ID2{…}:使id为ID2的元素h1的字体大小为14px,verdana字体,行高为字体高的150%,正常粗细.margin-top/bottom为30px,边框为1px宽,红色实线.依据以上解释,我们应该得到如下效果3:即ID1的margin-top/bottom=ab=ef=10px; ID2的margin-top/bottom=bc=de=30px;但用浏览器打开html文件,却得到Example4的效果,如下图4:即ab=cd=30px,ID1的margin-top/bottom=10px被折叠了,而且ID1应有的margin黑色背
8、景也一同被折叠消失了.为什么会折叠:造成以上现象的原因是,我们在css中并没有声明id为ID1的元素div的height(
