您当前的位置:首页 > 电脑技术 > web技术

css中用margin/padding来设置边距

2018-10-02 10:41:30人浏览
简介 在网页设计时常常为了布局或美观的需要,要对元素的边距进行设置,在CSS中设置边距一般要用到2个属性:margin和padding,其中margin用来设置外边距,而padding用来设置内边距,可以
    在网页设计时常常为了布局或美观的需要,要对元素的边距进行设置,在CSS中设置边距一般要用到2个属性:margin和padding,其中margin用来设置外边距,而padding用来设置内边距,可以参考如下图示:

用法介绍

    margin和padding对边距的设置可以设置四个边距,即上下左右,一般可以这样表示, margin四个边距:
(1)margin-left:左外边距
(2)margin-right:右外边距
(3)margin-top:上外边距
(4)margin-bottom:下外边距
同样的用法,padding也有四个边距:
(1)padding-left: 左内边距
(2)padding-right:右内边距
(3)padding-top:上内边距
(4)padding-bottom:下内边距

可以用具体的上下左右边距来设置相应位置的边距,但在现在的用法中,一般为了简便书写,一般采用如下书写方法(以padding为例,margin类似)。
写法一:
.exp{ padding:10px,5px,10px,10px;}
这样写了4个值,指从上开始,按顺时针方向的四个边距大小,即上边距、右边距、下边距、左边距。

写法二:
.exp{ padding:10px,5px,10px;}
这样写了3个值,分别指上边距、左右边距、下边距。

写法三:
.exp{ padding:10px,5px;}
这样写了2个值,分别指上下边距、左右边距。

写法四:
.exp{ padding:10px;}
这样写了1个值,指四个边距都为同一值。

值的表示

(1)length  规定具体单位记的外边距长度。
(2)%       基于父元素的宽度的外边距的长度。
(3)auto    浏览器计算外边距。
(4)inherit 规定应该从父元素继承外边距。(任何版本IE都不支持inherit属性值)

注意事项

     (1)对于块级标签,可以对其设上下左右margin/padding值,对于行级标签而言,只能对其左右设margin/padding,上下不起作用。
     (2)当两个同样的块级标签上下设margin值时,这两个块级标签上下的距离是取这两个margin值中大的一个,并不是两个margin值相加。对于同样的行级标签左右分别设置margin值时,中间的间距是这两个的margin值相加的。