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. Linux中磁盘分区、格式化、挂载等管理

    1. 添加磁盘,查看磁盘状况 [root@db1 /]# fdisk -l Disk /dev/sda: bytes heads, sectors/track, cylinders Units = c ...

  2. CyclicBarrier的用法

    CyclicBarrier是一个同步辅助类,它允许一组线程互相等待,直到到达某个公共屏障点 (common barrier point).在涉及一组固定大小的线程的程序中,这些线程必须不时地互相等待, ...

  3. Configutation读取properties文件信息

    commons configuration可以很方便的访问配置文件和xml文件中的的内容.Commons Configuration 是为了提供对属性文件.XML文件.JNDI资源.来自JDBC Da ...

  4. 解码url参数的lotusscript函数

    在Domino的系统开发过程中,我们往往要通过url来进行传参,传递参数给表单或者代理,假如浏览器请求的url带有参数,在交给服务器前服务器会对其进行编码(不知道这样理解对不对),像一些特殊符号,空格 ...

  5. CentOS 7 修改网卡名

    假设原网卡名为eth1, 那么在 /etc/sysconfig/network-scripts/ 目录下,必定会存在一个文件名为ifcfg-eth1,和网卡名对应, 这里假设要修改为eth0. 方法一 ...

  6. Oracle常用存储过程写法

    写在前面 这段时间工作最长接触到的就是Oracle数据库,不论查数据,还是统计.运行job,都离不开PL/SQL 存储过程,下面就整理下经常用到的知识. 一.Function函数 函数是执行非查询语句 ...

  7. Tomcat无法访问中文路径的解决办法

    来源于:http://sccassiel.blog.51cto.com/5398709/1141821/ 修改tomcat下的conf/server.xml文件下的 <Connector por ...

  8. （原）luarocks更新某个模块

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/6424398.html 参考网址: https://github.com/torch/nn/issues ...

  9. Spring3.0.3使用之异常解决

    2010-10-29  温馨提示:         以下异常仅在Spring3.0.3版本中遇到,其他版本可能也会遇到,读者可作参考.不保证会顺利通过.         近期在学习Spring3的一些 ...

  10. Python实现鸢尾花数据集分类问题——使用LogisticRegression分类器

    . 逻辑回归 逻辑回归(Logistic Regression)是用于处理因变量为分类变量的回归问题,常见的是二分类或二项分布问题,也可以处理多分类问题,它实际上是属于一种分类方法. 概率p与因变量往 ...