欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!

margin 属性是css用于在一个申明中设置装备摆设所有 margin 属性的简写属性,margin是css管束块级元素之间的隔断, 它们之间是透明弗成见的。

margin属性囊括了margin left :距左元素块距离(设置距左内边距) ;margin top:距头顶(上)元素块距离(设置装备摆设距顶部元素块间隔);margin right :距右元素块间隔(设置距右元素块距) ;margin bottom:底元素块隔绝距离(配置距低(下)元素块距)。其二维创建图可见CSS属性二维图。

CSS元素中margin的解剖图
margin的剖解图


margin left用法:margin-left:10px;  这个意思距离左元素块距10像素,可跟百分例如(margin-left:10%;   间隔左元素块10%的隔断)css margin-left教程;
margin right用法:margin-right:10px; 这个含意隔绝距离右边元素块距10像素,可跟百分比如(margin-right:10%; 隔绝距离右边元素块10%的间隔);
margin top用法:margin-top:10px; 这个含意距离顶边元素块距10像素,可跟百分好比(margin-top:10%; 距离顶边元素块10%的隔绝距离)css margin-top;
margin bottom用法:margin-bottom:10px; 这个寄义距离低边元素块距10像素,可跟百分好比(margin-bottom:10%; 隔断底边元素块10%的隔绝距离)css margin-bottom;
注意margin两端的链接“ - ”号,设置间隔值时用“ : ”并赋与值,并以“ ; ”完结,而且全体用小写半角字母。

要是是左右上下都需求配置margin的值时可能简写来实现,以优化css 。
如简写方式有:
margin:10px; 意义就是上下左右元素块隔绝距离就是10px(10像素)等于margin-top:10px; margin-bottom:10px; margin-left:10px; margin-right:10px; 异样成绩简写;
margin:5px 10px; 意思凹凸元素块距离为5px,支配的元素块距离为10px,等于margin-top:5px; margin-bottom:5px; margin-left:10px; margin-right:10px; 同样效果简写;
margin:5px 6px 7px; 含意上元素块隔绝距离5px,下元素块隔断为7PX,左右元素块间隔为6px,等于margin-top:5px; margin-bottom:7px; margin-left:6px; margin-right:6px; 异样效果简写; 
margin:5px 6px 7px 8px;  意思上元素块为5px,右元素块隔断为6px ,下元素块距离为7px,左元素块隔绝距离8px,等于等于margin-top:5px; margin-right:6px; margin-bottom:7px; margin-right:8px; 同样效果简写; 

其中margin:5px 6px 7px 8px; 的转法为顺时针即图:

css中margin的属性转法图
margin的属性转法图解


下面便是div css站点总结的margin的属性与用法。个中margin的用与padding相反。

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/shili/s52849.shtml