DIV+CSS中padding和margin属性用法-css padding属性

DIV+CSS是现在网页布局的主流，你对其中的padding和margin两个重要属性的用法是否了解，这里和大家分享一下，相信本文介绍一定会让你有所收获。

padding和margin两个重要属性的介绍

DIV+CSS是现在网页布局的主流，现在已经很少可以说几乎没人用table布局网页了，但是无论是程序员还是网页设计师都应该掌握DIV+CSS。这篇文章将讲述HTML和CSS的关键—盒子模型(Box model).。理解Box model的关键便是margin和padding属性,，而正确理解这两个属性也是学习用css布局的关键。

以下说明margin和padding属性:

1.Margin:

包括margin-top,margin-right,margin-bottom,margin-left,控制块级元素之间的距离,它们是透明不可见的,对于Fig.2所示的上右下左margin值均为40px,因此代码为:

margin-top:40px;  
margin-right:40px;  
margin-bottom:40px;  
margin-left:40px;

根据上,右,下,左的顺时针规则,简写为
margin:40px40px40px40px;
为便于记忆,请参考下图:

当上下,左右margin值分别一致,可简写为:

margin:40px40px;

前一个40px代表上下margin值,后一个40px代表左右margin值.
当上下左右margin值均一致,可简写为:

margin:40px;

2.Padding:

包括padding-top,padding-right,padding-bottom,padding-left,控制块级元素内部,content与border之间的距离,其代码,简写请参考margin属性的写法.

至此,我们已经基本了解margin和padding属性的基本用法.但是,在实际应用中,却总是发生一些让你琢磨不透的事,而它们又或多或少的与margin有关.

注:当你想让两个元素的content在垂直方向(vertically)分隔时,既可以选择padding-top/bottom,也可以选择margin-top/bottom,再此Jorux建议你尽量使用padding-top/bottom来达到你的目的,这是因为css中存在Collapsingmargins(折叠的margins)的现象.

本文来源于php爱好者http://www.phplover.cn/,原文地址：http://www.phplover.cn/post/padding-margin.html

【编辑推荐】