HTML CSS——margin和padding的学习

当前位置 : 首页 > 网页制作 > CSS > HTML CSS——margin和padding的学习

HTML CSS——margin和padding的学习

来源: 作者: 时间:2016-01-23 10:51
你在学习margin和padding的时候是不是懵了,什么他娘的内边距,什么他娘的外边距。呵呵呵,刚开始我也有点不理解,后来通过查资料学习总算弄明白了,现在我来谈一下自己对margin和

你在学习margin和padding的时候是不是懵了,——什么他娘的内边距,什么他娘的外边距。呵呵呵,刚开始我也有点不理解,后来通过查资料学习总算弄明白了,现在我来谈一下自己对margin和padding的理解:

一、什么是边距

CSS中的边距指的是当前元素border与周围其它元素border的距离(或者称为空间)。

二、什么是内边距,什么是外边距

代码2-1:



	
		
		
	
	
		
test1
test2_son

n块覿5rV砿9鉑^草潑鷉j浏览器计算外边距,padding作用的元素由浏览器计算内边距;都可通过设定属性值为inherit而继承父元素边距——margin继承父元素外边距,padding继承父元素内边距,但由于inherit在任何的版本的 Internet Explorer (包括 IE8)都不支持,所以也就没有学习的必要了。

②、margin允许指定负的外边距值,不过使用时要小心;padding不允许指定负边距值;

③、margin和padding的属性值都可以有1个、2个、3个和4个:

a、margin有4个属性值(例如margin:10px 5px 15px 20px;), 其含义是:上外边距10px、右外边距5px、下外边距15px、左外边距20px;

padding有4个属性值(例如padding:10px 5px 15px 20px;),其含义是:上内边距10px、右内边距5px、下内边距15px、左内边距20px;

总结:无论是margin还是padding,如果有4个属性值,那么它们的作用方向顺时针 依次为上、右、下、左;

b、margin有3个属性值(例如margin:10px 5px 15px ;), 其含义是:上外边距10px、右外边距和左外边距5px、下外边距15px;

padding有3个属性值(例如padding:10px 5px 15px;),其含义是:上内边距10px、右内边距和左内边距5px、下内边距15px;

总结:无论是margin还是padding,如果有3个属性值,那么它们的作用方向顺时针 依次为上、右左、下;

c、margin有2个属性值(例如margin:10px 5px;), 其含义是:上外边距和下外边距10px、右外边距和左外边距5px;

padding有2个属性值(例如padding:10px 5px;),其含义是:上内边距和下内边距10px、右内边距和左内边距5px;

总结:无论是margin还是padding,如果有2个属性值,那么它们的作用方向顺时针 依次为上下、右左;

d、margin有1个属性值(例如margin:10px;), 其含义是:4 个外边距都是 10px;

padding有1个属性值(例如padding:10px;),其含义是:4 个内边距都是 10px;

总结:无论是margin还是padding,如果有1个属性值,那么它们的边距值都是相等的;

④、margin和padding的属性值可以为具体的带单位的数也可以为百分数——带单位的数比如1cm、1px等等,如果为百分数那么它们参照的对象是上一级的父元素边距值。

Tag:
网友评论

<