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

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


margin的属性转法图解

上面即是div css网站总结的margin的属性与用法。其中margin的用与padding相同。

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

CSS margin属性与用法教程的更多相关文章

  1. CSS margin 属性

    设置外边距的最简单的方法就是使用 margin 属性. margin 属性接受任何长度单位,可以是像素.英寸.毫米或 em. margin 可以设置为 auto.更常见的做法是为外边距设置长度值.下面 ...

  2. CSS margin属性取值

    margin表示一个元素的外边距.取值为正值时,表示相对于正常流离邻近元素更远,而取负值时,使其更近 但是,设置margin后,四个方向的表现形式不同 自身发生移动:top.left margin-t ...

  3. CSS margin属性

    例子: p{ margin:2cm 4cm 3cm 4cm; } 结果如下: margin-top是上外边距 margin-right是右外边距 margin-bottom是下外边距 margin-l ...

  4. [HTML/CSS]margin属性用法

    概述 在一些小的项目中,前台样式还是需要自己来写的,这时候,margin在布局中还是有一定的地位的.上篇文章中介绍的盒子模型中,就有margin的存在. margin margin可以用来设置css块 ...

  5. JS控制css float属性的用法经验总结

    JavaScript与CSS属性的控制网上很常见,因此来说用js操作css属性是有一定规律的. 1.对于没有中划线的css属性一般直接使用style.属性名即可. 如:obj.style.margin ...

  6. 理解CSS Clip属性及用法

    应用Clip属性实现的一个简单效果图: 样式写法: .my-element { position: absolute; clip: rect(10px  350px  170px  0); /* IE ...

  7. CSS——margin

    CSS margin 属性 定义和用法 margin 简写属性在一个声明中设置所有外边距属性.该属性可以有 1 到 4 个值. 说明 这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽 ...

  8. 细说 CSS margin

    作者:https://coding.net/u/zhengkenghong原文:https://blog.coding.net/blog/css-margin 细说 CSS margin 本文着重描述 ...

  9. css margin的相关属性，问题及应用

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=48 引言:margin ...

随机推荐

  1. VCAP5-DCA Objective 1.3 – Configure and Manage Complex Multipathing and PSA Plug-ins

    http://virtuallyhyper.com/2012/10/vcap5-dca-objective-1-3-configure-and-manage-complex-multipathing- ...

  2. 1052: 旋转单词(words)

    #include <iostream> #include <iomanip> #include <cstdlib> #include <string> ...

  3. IntelliJ IDEA安装主题详细步骤

    主题下载网址:http://color-themes.com/?view=index 本文测试的软件版本:IntelliJ IDEA 2016.1.2 一.下载主题包   1 1. 打开上述网址(ht ...

  4. libvlc_new 调用产生段错误

    在调试程序的时候,碰到一个奇怪的段错误问题.只要链接的时候使用-Wl,-rpath=./vlc/lib就会产生段错误,如果链接的时候使用的是-Wl,-rpath=../../tool/vlc/lib则 ...

  5. java第五节 多线程/多线程的同步

    /* 第五讲 多线程 了解进程和线程 在多任务系统中,每个独立执行的程序称为进程,也就是"正在进行的程序",我们现在使用的操作系统一般都是多任务的 即能够同时执行多个应用程序,实际 ...

  6. DHCP 服务测试

    DHCP三个端口: 服务端:UDP 67 客户端:UDP 68 DHCPv6 客户端:UDP 546,这是需要特别开启的 DHCP failover 服务,用来做双机热备的. 实验一.DHCP服务器基 ...

  7. 在Listener(监听器)定时启动的TimerTask(定时任务)中使用Spring@Service注解的bean

    1.有时候在项目中需要定时启动某个任务,对于这个需求,基于JavaEE规范,我们可以使用Listener与TimerTask来实现,代码如下: public class TestTaskListene ...

  8. Kubernetes 选择 IPVS

    什么是 IPVS ? IPVS (IP Virtual Server)是在 Netfilter 上层构建的,并作为 Linux 内核的一部分,实现传输层负载均衡. IPVS 集成在 LVS(Linux ...

  9. 阿里云ecs配置辅助网卡绑定公网ip地址

    EIP直通车 前置条件:1.大家的实例是从经典迁移到VPC里面的,上古时期,经典实例大家购买实例的时候都是买了带宽的.而这种带宽一般情况下都是包年包月的,而且这种绑定在实例上的IP,我们把它叫做公网I ...

  10. iOS手势的综合运用

    //自定义一个VIEW封装手势功能 // CustormView.m // gesterDemoo // // Created by ganchaobo on 13-7-13. // Copyrigh ...