<html>

<body>

<div style="border: 1px solid red;">

<div style="border: 1px solid blue; margin: 20px;">

margin: 20px;（上、下、左、右各20px。）

</div>

</div>

<div style="border: 1px solid red;">

<div style="border: 1px solid blue; margin: 20px 40px;">

margin: 20px 40px;（上、下20px；左、右40px。）

</div>

</div>

<div style="border: 1px solid red;">

<div style="border: 1px solid blue; margin: 20px 40px 60px;">

margin: 20px 40px 60px;（上20px；左、右40px；下60px。）

</div>

</div>

<div style="border: 1px solid red;">

<div style="border: 1px solid blue; margin: 20px 40px 60px 80px;">

margin: 20px 40px 60px 80px;（上20px；右40px；下60px；左80px。）

</div>

</div>

<p>在css中使用margin可以将margin-top，margin-right，margin-bottom，margin-left，缩写为一个标记，顺序为<span style="color: #ff0000"><strong>上右下左</strong></span>（顺时针）。</p>

<p>margin标记可以带一个、二个、三个、四个参数，各有不同的含义 http://www.100sucai.com</p>

</body>

</html>

　　

解说css中的margin属性缩写方式的更多相关文章

  1. 深入理解css中的margin属性

    深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...

  2. CSS 中关于background 属性功能

    background 是 css中的核心属性,我们对他应该充分了解. background-image   定义背景图像  这个属性是我们用的最多的属性 设置背景图像有两个方式 background: ...

  3. 理解与应用css中的display属性

    理解与应用css中的display属性 display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none block inline inline-block inherit 下面, ...

  4. CSS中的display属性（none,block,inline,inline-block,inherit）

    css中的display属性(none,block,inline,inline-block,inherit) display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none bl ...

  5. css中的定位属性position（转）

    css中的定位属性position   同样的也是上课的时候发现学生难以理解的一些问题拿出来记录一下,希望帮助初学者. 在css中定位属性position的运用在页面中是很常用的,特别是一些结合js来 ...

  6. CSS中上下margin的传递和折叠

    CSS中上下margin的传递和折叠 1.上下margin传递 1.1.margin-top传递 为什么会产生上边距传递? 块级元素的顶部线和父元素的顶部线重叠,那么这个块级元素的margin-top ...

  7. Css中的Position属性

    Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...

  8. 深入理解CSS中的margin

    1.css margin可以改变容器的尺寸 元素尺寸 可视尺寸--标准盒子模型中盒子的宽度是不包括margin值的,clientWidth 占据尺寸--包括margin的宽度 outWidth不在标准 ...

  9. 细说CSS中的display属性

    相信大部分奋战在前端的,尤其在前端攻城的过程中,有一种越陷越深的感觉,不错,一如前端深似海,从此妹子是浮云啊,前端上手容易,深入难啊!下面我就CSS中的display属性讲下我自己所积累的,与大家共享 ...

随机推荐

  1. FastDFS分布式文件系统配置文件详解

    一.tracker配置文件详解: # is this config file disabled# false for enabled# true for disableddisabled=false# ...

  2. Linux下gcc编译控制动态库导出函数小结

    根据说明文档“How To Write Shared Libraries"介绍, 有四种方法: 1. 在方法声明定义时,加修饰:__attribute__((visibility(" ...

  3. Docker集群管理工具 - Kubernetes 部署记录 (运维小结)

    一.  Kubernetes 介绍 Kubernetes是一个全新的基于容器技术的分布式架构领先方案, 它是Google在2014年6月开源的一个容器集群管理系统,使用Go语言开发,Kubernete ...

  4. Lerning Entity Framework 6 ------ Complex types

    Complex types are classes that map to a subset of columns of a table.They don't contains key. They a ...

  5. SQL注入之重新认识

    i春秋作家:anyedt 原文来自:https://bbs.ichunqiu.com/thread-41701-1-1.html 引言 作为长期占据 OWASP Top 10 首位的注入,认识它掌握它 ...

  6. PHP注释

    PHP支持C.C++和 Shell 脚本风格的注释. 单行注释 两个反斜线组成的单行注释 // 注释内容 一个井号组成的单行注释 # 注释内容 说明:PHP单行注释几乎用的都是//,很少使用#来注释内 ...

  7. Filesystem Case-Sensitivity Mismatch

    Filesystem Case-Sensitivity Mismatch The project seems to be located on a case-sensitive file system ...

  8. Oracle 的分页查询 SQL 语句

    Oracle的分页查询语句基本上可以按照本文给出的格式来进行套用. 分页查询格式: SELECT * FROM (SELECT A.*, ROWNUM RN FROM (SELECT * FROM T ...

  9. Java学习笔记31（集合框架五：set接口、哈希表的介绍）

    set接口的特点: 1.不包含重复元素 2.set集合没有索引,只能用迭代器或增强for循环遍历 3.set的底层是map集合 方法和Collection的方法基本一样 set接口的实现类HashSe ...

  10. 机器学习技法笔记：09 Decision Tree

    Roadmap Decision Tree Hypothesis Decision Tree Algorithm Decision Tree Heuristics in C&RT Decisi ...