padding margin border 和元素大小

元素占用宽度 = 元素宽度+padding+border+margin

注意margin只是隔开元素,不会使得元素变大,而padding会使得元素变大,也就是说

元素真实宽度=元素宽度+padding+border

border 在元素的外层

一、关于Padding

1、设置对象四边的内边距。默认值是0。

2、如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。

3、如果只提供一个,将作用于全部的四边。

4、如果提供两个,第一个作用于上、下,第二个作用于左、右。

5、如果提供三个,第一个作用于上,第二个作用于左、右,第三个作用于下。

6、内联对象要使用该属性,必须先设定对象的height或width属性(在样式表中将width和height写在padding前面即可),或者设定position属性为absolute。不允许负值。

7、内边距留白处总是透明的,并且设置内边距会直接影响对象的大小。


提示:

(1)设置了padding属性就相当于增加了对象的大小。原宽270px,高175px,设置padding:30px 0 0
40px后对象的大小应该是宽为310px,高为205px,要想保持原大小就必须减去相应的宽高。所以,对象的宽是270-40=230px,高是
175-30=145px。

(2)padding是不具有继承性的。

(3)padding属性是可以分别设置的。padding-top、padding-right、padding-bottom、padding-left分别作用于上、右、下、左四边。语法和参数和padding的设置相同。

二、关于margin

(1)设置对象四边的外边距。默认值是0。

(2)如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。

(3)如果只提供一个,将作用于全部的四边。

(4)如果提供两个,第一个作用于上、下,第二个作用于左、右。

(5)如果提供三个,第一个作用于上,第二个作用于左、右,第三个作用于下。

(6)内联对象要使用该属性,必须先设定对象的height或width属性,或者设定position属性为absolute。

(7)外边距总是透明的,并且设置外边距不会直接影响对象的大小,只是相对位置发生变化。

提示:

(1)margin属性不具有继承性。由于IE的双边距BUG会往往导致内联对象设置边距后与父对象左边的距离实际值不符,遇到这样的问题就加display:inline;,意思是把对象视作行级元素。

(2)设置内联对象的上下边距是不会出现双边距问题的。margin不具有继承性,内联对象设置左右边距时出现双倍边距完全是IE的BUG。

(3)margin属性是可以分别设置的。margin-top、margin-right、margin-bottom、margin-left分别作用于上、右、下、左四边。

上一篇:DevExpress的SpinEdit控件无法输入数字的问题


下一篇:解决EP拒绝访问注册表Global键的的问题