css中的margin/padding/border属性图释

上一篇 / 下一篇  2009-08-11 21:29:02 / 个人分类：css

查看( 230 ) / 评论( 0 ) / 评分( 0 / 0 )

这篇文章是转载的，对于理解css中的margin/padding/border这些概念很有帮助

CSS 中有个重要的概念，就是盒子模式 (Box model)。

胡戈的"一个馒头引发的血案"中有个圆圈套圆圈娱乐城，而这个盒子模式套用这句话来说，就是方块套方块。

先看看下面这个图，黑框包围的一个方块，就是一个盒子 (Box)。

盒子里由外至里依次是：

  • margin 边距
  • border 边框
  • padding 间隙 (也有人称做补丁)
  • content (内容，比如文本，图片等)

CSS 边距属性 (margin) 是用来设置一个元素所占空间的边缘到相邻元素之间的距离。

CSS 边框属性 (border) 用来设定一个元素的边线。

CSS 间隙属性 (padding) 是用来设置元素内容到元素边框的距离。

CSS 背景属性指的是 content 和 padding 区域。

CSS 属性中的 width 和 height 指的是 content 区域的宽和高。

附：Internet Explorer 6 中的 CSS 增强功能

http://www.microsoft.com/china/MSDN/library/NetComm/webteam08062001.mspx?mfr=true

Internet Explorer 6与更早版本间width和height属性计算方式的区别的图示说明

W3C组织建议把所有网页上的对像都放在一个盒(box)中，设 计师可以通过创建定义来控制这个盒的属性，这些对像包括段落、列表、标题、图片以及层。盒模型主要定义四个区域：内容(content)、边框距 (padding)、边界(border)和边距(margin)。 对于初学者，经常会搞不清楚margin，background-color，background- image，padding，content，border之间的层次、关系和相互影响。这里提供一张盒模型的3D示意图，希望便于你的理解和记忆。

  
  • margin：层的边框以外留的空白     
  • background-color：背景颜色     
  • background-image：背景图片     
  • padding：层的边框到层的内容之间的空白      
  • border：边框      
  • content：内容     

边框(border)边距(margin)和间隙(padding)属性的区别

　　边框属性(border)用来设定一个元素的边线。
　　边距属性(margin)是用来设置一个元素所占空间的边缘到相邻元素之间的距离。
　　间隙属性(padding)是用来设置元素内容到元素边界的距离。
　　这三个属性都属于CSS中box类型的属性。

　　下面这个示意图，很形象地体现了三者之间的区别。


margin语法：

margin :auto|length
说明：

检索或设置对象四边的外延边距。
如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。
如果只提供一个，将用于全部的四边。
如果提供两个，第一个用于上－下，第二个用于左－右。
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
Mozilla建议的CSS书写顺序
/* mozilla.org Base Styles
* maintained by fantasai
* (classes defined in the Markup Guide -http://mozilla.org/contribute/writing/markup)
*/
/* Suggested order:
//显示属性
* display
* list-style
* position
* float
* clear
//自身属性
* width
* height
* margin
* padding
* border
* background
//文本属性
* color
* font
* text-decoration
* text-align
* vertical-align
* white-space
* other text
* content
*
*/
/* mozilla.org Base Styles
* maintained by fantasai
* (classes defined in the Markup Guide -http://mozilla.org/contribute/writing/markup)
*/
/* Suggested order:
//显示属性
* display
* list-style
* position
* float
* clear
//自身属性
* width
* height
* margin
* padding
* border
* background
//文本属性
* color
* font
* text-decoration
* text-align
* vertical-align
* white-space
* other text
* content
*
*/

收藏 举报

TAG:

 

评分：0

我来说两句

日历

« 2023-09-07  
日 一 二 三 四 五 六
     12
3456789
10111213141516
17181920212223
24252627282930

数据统计

  • 访问量: 30104
  • 日志数: 57
  • 建立时间: 2009-01-09
  • 更新时间: 2009-10-29

RSS订阅

Open Toolbar