CSS margin简洁写法/margin 属性编辑

2016-12-11 22:53 阅读 31 次 评论关闭

在CSS文件里,我们常常会看到margin的属性有不同的编辑,一般能看到以下三种情况:

margin:20px;

margin:20px 40px;

margin:20px 40px 60px 80px;

这三种margin属性编辑代表了什么意思?margin属性如何在网页中体现?下面猎微网来跟大家分享一下margin的属性编辑问题:

CSS margin简洁写法与margin 属性编辑

margin简写属性在一个声明中设置所有当前或者指定元素外边距属性,该属性可以有 1 到 4 个值。

margin跟padding一样,也有简洁写法。我们可以使用margin属性来设置四个方向的外边距。在实际编程中,我们往往使用的是margin的这种高效简洁写法来编程。

margin写法有3种,分别如下:

margin:像素值;

margin:像素值1 像素值2;

margin:像素值1 像素值2 像素值3 像素值4;

例如:

“margin:20px;”表示四个方向的外边距都是20px;

“margin:20px 40px;”表示margin-top和margin-bottom为20px,margin-right和margin-left为40px。

“margin:20px 40px 60px 80px;”表示margin-top为20px,margin-right为40px,margin-bottom为60px,margin-left为80px。

大家按照顺时针方向记忆就可以了。

margin 语法说明

这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度。

块级元素的垂直相邻外边距会合并,而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地,浮动元素的外边距也不会合并。允许指定负的外边距值,不过使用时要小心。

margin 简写属性。在一个声明中设置所有外边距属性。

margin-bottom 设置元素的下外边距。

margin-left 设置元素的左外边距。

margin-right 设置元素的右外边距。

margin-top 设置元素的上外边距。

margin语法结构

margin:5px auto;意思上下为5,左右平均居中

margin-top: 20px; 上外边距

margin-right: 30px; 右外边距

margin-bottom: 30px;下外边距

margin-left: 20px; 左外边距

margin:1px 四边统一边距

margin:1px 1px 上下边距,左右边距

margin:1px 1px 1px 上,左右,下边距

margin:1px 1px 1px 1px 上,右,下,左边距

注释:允许使用负值。

JavaScript 语法:

object.style.margin="10px 5px"

实例

设置 p 元素的 4 个外边距:

p { margin:2cm 4cm 3cm 4cm; }

浏览器支持

所有浏览器都支持 margin 属性。

注释:任何的版本的 Internet Explorer(包括 IE8)都不支持属性值 "inherit"。

可能的值

描述

auto

浏览器计算外边距。

length

规定以具体单位计的外边距值,比如像素、厘米等。默认值是 0px。

%

规定基于父元素的宽度的百分比的外边距。

inherit

规定应该从父元素继承外边距。

版权声明:本文著作权归原作者所有,欢迎分享本文,谢谢支持!
转载请注明:CSS margin简洁写法/margin 属性编辑 | 猎微网

评论已关闭!