<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. CentOS 7安装新版RabbitMQ解决Erlang 19.3版本依赖

    通过yum等软件仓库都可以直接安装RabbitMQ,但版本一般都较为保守. RabbitMQ官网提供了新版的rpm包(http://www.rabbitmq.com/download.html),但是 ...

  2. Win10 Hyper-v下虚拟机使用无线网络

    首先要承认一点的是写这个随笔更大的初衷是想吐槽,搜了半天,全是一种方法,就是创建一个新的网络适配器,配置为外部网络啥啥啥,用倒是能用,就是网速那叫一个感人,我的是电信百兆光纤网页打开都如蜗牛爬,无法忍 ...

  3. Maven 如何发布 jar 包到 Nexus 私库

    Nexus2可以通过管理界面来上传jar包到私库中,而最新的Nexus3却找不到了上传界面,只能通过以下方式来发布到私库. 发布第三方jar包 这种情况是maven远程仓库没有,本地有的第三方jar包 ...

  4. iOS开发手记－仿QQ音乐播放器动态歌词的实现

    最近朋友想做个音乐App,让我帮忙参考下.其中歌词动态滚动的效果,正好我之前也没做过,顺便学习一下,先来个预览效果. 实现思路 歌词常见的就是lrc歌词了,我们这里也是通过解析lrc歌词文件来获取其播 ...

  5. Go语言标准库之time

    Go语言标准库之time 时间的格式化和解析 格式化 Format Go语言和其他语言的时间格式化的方式不同,Go语言格式化的方式更直观,其他的语言一般是yyyy-mm-dd package main ...

  6. spring boot 访问静态资源的步骤

    1)resources/static下放置html文件.(或者static下新建目录 http://hcss:8090/imgs/单例.png) 2)webapp下放置html文件. 如果两个路径下有 ...

  7. IDEA内置git功能的使用教程

    IDEA内置git功能的使用教程 IDEA git  IDEA被公认为是最好的java开发工具,除了在代码助手.代码提示.重构工具等方面有比较好的支持,还在各类版本控制工具(git.tfs.svn.g ...

  8. SignalR 中使用 MessagePack 序列化提高 WebSocket 通信性能

    It's like JSON.but fast and small. MessagePack is an efficient binary serialization format. It lets ...

  9. git 简单命令总结

    一.本地仓库操作 1.构建本地仓库 初始化本地仓库,生成.git隐藏文件 $ git init 在文件夹内添加readme.md文件,执行如下命令,添加到本地仓库暂存区 $ git add readm ...

  10. 用C#学习数据结构之链表

    单链表的定义 链表是用一组任意的存储单元来存储线性表中的数据元素(这组存储单元可以是连续的,也可以是不连续的).那么,怎么表示两个数据元素逻辑上的相邻关系呢?即如何表示数据元素之间的线性关系呢?为此, ...