css怎么设置所有margin属性

魁首哥

作者

css怎么设置所有margin属性

这篇文章主要介绍了css怎么设置所有margin属性的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇css怎么设置所有margin属性文章都会有所收获，下面我们一起来看看吧。

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

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

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 7px8px; 意思上元素块为5px，右元素块隔断为6px ，下元素块距离为7px，左元素块隔绝距离8px，等于等于margin-top:5px; margin-right:6px; margin-bottom:7px; margin-right:8px; 同样效果简写；

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