margin属性详细写法教程

2019-07-17 19:58:44

在CSS中的margin属性是用来控制块级元素之间的距离,也就是我们常说的margin属性设置版块间距,设置的margin属性是透明不可见的。

margin属性在对于外边距设置中,可以有 1 到 4 个值,也就是元素的上、右、下、左边距。

需要注意的是,在设置margin属性时,块级元素的垂直相邻外边距会合并,而行内元素实际上不占上下外边距,行内元素的的左右外边距不会合并。同样地,浮动元素的外边距也不会合并。

Margin属性允许指定负值的外边距。

一、Margin属性写法之1个数值。

如:margin:20px;

这里设置margin属性为1个数值时20px时,表示的是上、右、下、左4 个外边距都是20px。

二、Margin属性写法之2个数值。

如:margin:10px 20px;

上面的2个数字中,前面的10px表示的是是上、下外边距。后面的数值20px表示的是右、左外边距都是20px。

三、Margin属性写法之3个数值。

如:margin:10px 15px 5px;

这里前面的10px数值是上外边距,中间的15px是右、左外边距,后面的5px是表示的下边距。

四、Margin属性写法之4个数值。

如:margin:20px 10px 15px 20px;

说明:这里的4个值从左到右,分别表示的是上、右、下、左边距的值为20px、10px、15px、20px。

一般情况下,如果版块上、右、下、左四边所需要设置的外间距值不相同时,使用的是4个数值。

如果只需要设置某一边的margin属性,可以这样写。

1、margin-left:20px; 

2、margin-right:15px; 

3、margin- t op:10px; 

4、margin-bottom:5px; 

上面4条单独的内容中,分别表示的是单一边的外边距写法,当然,也可以把值写成百分比的形式;

相关