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. 安装 LUA

    为了以后方便,记录一下步骤 1.yum install readline-devel 2.wget http://www.lua.org/ftp/lua-5.1.4.tar.gz 3.cd lua-5 ...

  2. hadoop 文件合并

    来自:http://blog.csdn.net/dandingyy/article/details/7490046 众所周知,Hadoop对处理单个大文件比处理多个小文件更有效率,另外单个文件也非常占 ...

  3. VTK中的装配体（vtkAssembly）

    Actors有时也会组合在一起形成层次结构,当其中的某个Actor运动时,会影响到其他Actor的位置.例如,一个机械手臂可能由上臂.前臂.手腕和末端等部分通过关节连接起来.当上臂绕着肩关节旋转时,我 ...

  4. 错误提示：通过 Web 服务器的身份验证的用户无权打开文件系统上的文件

    //win7中iis配置好了可是网页打不开,为什么.? //错误提示:通过 Web 服务器的身份验证的用户无权打开文件系统上的文件 //解决办法1.右键单击你的网站根目录文件夹,如wwwroot文件夹 ...

  5. Libevent例子(一)

    服务器端 #include<stdio.h> #include<string.h> #include<errno.h> #include<event.h> ...

  6. ios 中sqlite的用法

    #import <sqlite3.h> @interface ViewController () { sqlite3 *_sqldb; } @end @implementation Vie ...

  7. Spring MVC 教程,快速入门,深入分析[1-11]

    资源下载: Spring_MVC_教程_快速入门_深入分析V1.1.pdf SpringMVC核心配置文件示例.rar     作者:赵磊 博客:http://elf8848.iteye.com   ...

  8. 修改linux 最大文件限制数 ulimit

    1)修改当前交互终端的limit值 查询当前终端的文件句柄数: ulimit -n 回车,一般的系统默认的1024. 修改文件句柄数为65535,ulimit -n 65535.此时系统的文件句柄数为 ...

  9. VS2010编译Boost 1.56

    (1)首先下载源代码:http://softlayer-dal.dl.sourceforge.net/project/boost/boost/1.56.0/boost_1_56_0.zip 解压到某个 ...

  10. React(0.13) 服务端渲染的两个函数

    1.React.renderToString 函数,  参数是组件,返回一个字符串 <!DOCTYPE html> <html> <head> <title& ...