Margin、Border、Padding属性的区别和联系

开发 前端
本文向大家描述一下DIV+CSS中Margin属性、Border属性、Padding属性三者的联系与区别,相信本文介绍一定会让你有所收获,欢迎大家一起来学习DIV+CSS网页布局。

你对DIV+CSS中Margin属性、Border属性、Padding属性的区别和联系是否了解,这里和大家分享一下,希望本文介绍对你有所帮助。

Margin属性、Border属性、Padding属性三者的联系与区别

三个元素的含义:

Margin属性

检索或设置对象四边的外延边距。如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。如果只提供一个,将用于全部的四边。如果提供两个,***个用于上、下,第二个用于左、右。如果提供三个,***个用于上,第二个用于左、右,第三个用于下。内联对象要使用该属性,必须先设定对象的height或width属性,或者设定position属性为absolute。

Border属性

内容的边框;border-color的默认值将采用文本颜色。要使用该属性,必须先设定对象的height或width属性,或者设定position属性为absolute。

Padding属性

检索或设置对象四边的补丁边距。如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。如果只提供一个,将用于全部的四条边。如果提供两个,***个用于上、下,第二个用于左、右。如果提供三个,***个用于上,第二个用于左、右,第三个用于下。内联对象要使用该属性,必须先设定对象的height或width属性,或者设定position属性为absolute。不允许负值。


记住这张图,这三者的关系相信你就不会忘了。

【编辑推荐】

  1. IE6不支持的五大CSS选择符
  2. 实例解析CSS padding 属性用法
  3. DIV+CSS网页布局中margin优化的一种思路
  4. DIV+CSS开发Xhtml网页对SEO优化的影响
  5. DIV CSS网页布局中对段落进行排版的方法

 

责任编辑:佚名 来源: mscss.cn
相关推荐

2010-08-23 13:21:51

padding-lefpadding-rigCSS

2010-08-25 08:57:33

marginpadding

2010-08-23 15:51:54

paddingmargin

2010-08-19 11:32:10

CSSpaddingmargin

2010-08-23 09:01:45

MarginPadding

2010-09-16 10:57:15

paddingmarginCSS

2010-08-25 09:03:03

marginpadding

2010-08-19 12:55:55

CSSMarginPadding

2010-08-19 13:43:07

marginpadding

2010-08-19 13:47:25

MarginPadding

2010-09-08 11:06:49

CSSpaddingmargin

2010-08-20 15:56:58

padding-toppadding-lefCSS

2010-08-23 13:45:28

padding-botCSSpadding-rig

2010-08-25 11:05:03

CSSpaddingmargin

2010-08-23 15:14:10

padding

2010-08-19 11:22:19

marginpadding

2010-08-25 09:43:42

margin

2010-08-25 09:25:13

CSSmargin

2010-08-23 13:29:43

HTMLpadding

2010-08-24 08:56:22

CSSpadding
点赞
收藏

51CTO技术栈公众号