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. Windows服务安装与控制

    Windows服务安装与控制 1.建立服务 (1)定义一个ServiceInstaller using System; using System.Collections.Generic; using ...

  2. C语言读取 未知长度 的矩阵

    1.确定矩阵行数: 使用每次读取一行函数fgets - row = 0; while(fgets(buf, buflen, fp) != NULL) row++; -   2.确定矩阵列数: - re ...

  3. Python 模块浅析

    如果你退出Python解释器重新进入,以前创建的一切定义(变量和函数)就全部丢失了.因此,如果你想写一些长久保存的程序,最好使用一个文本编辑器来编写程序,把保存好的文件输入解释器. 我们称之为创建一个 ...

  4. Iterator接口用法

    1.所有实现Collection接口的容器类都有一个iteractor方法,用于返回一个实现了Iteractor接口的对象, 2.Iteractor对象成为迭代器,用以实现对容器内元素的遍历操作 3. ...

  5. [转]mysql组合索引与字段顺序

    下列转自:http://www.tech-q.cn/archiver/tid-11673.html 很多时候,我们在mysql中创建了索引,但是某些查询还是很慢,根本就没有使用到索引!一般来说,可能是 ...

  6. HDOJ 5288 OO’s Sequence 水

    预处理出每一个数字的左右两边能够整除它的近期的数的位置 OO's Sequence Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 13 ...

  7. 原生Ajax使用教程

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6682564.html    浏览器端 一:创建XMLHttpRequest对象       所有现代浏览器均支 ...

  8. python之函数用法startswith()

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #python之函数用法startswith() #http://www.runoob.com/python/ ...

  9. 三种常用的MySQL建表语句

    MySQL建表语句是最基础的SQL语句之一,下面就为您介绍最常用的三种MySQL建表语句,如果您对MySQL建表语句方面感兴趣的话,不妨一看. 1.最简单的: CREATE TABLE t1(    ...

  10. XmanagerEnterprise-6.0.0092-beat内测版|免费使用

    xshell很还好用,目前发布beat6.0免费注册.免费使用... 00.安装 11.扁平化的UI download: 链接: https://pan.baidu.com/s/1qXTjjAG 密码 ...