<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. RxSwift学习笔记7：buffer/window/map/flatMap/flatMapLatest/flatMapFirst/concatMap/scan/groupBy

    1.buffer的基本使用 let publishSubject = PublishSubject<String>() //buffer 方法作用是缓冲组合,第一个参数是缓冲时间,第二个参 ...

  2. Alpha阶段项目复审（冲鸭队）

    Alpha阶段项目复审(冲鸭队) 组名 优点 缺点 排名 天冷记得穿秋裤队 支持文件离线开源下载,没有限速 部分功能未实现 1 中午吃啥队 点餐系统用户需求较高,系统功能完善 界面可以再完善一下些 2 ...

  3. Hessian 使用例子

    一.协议包(数据对象需要实现序列化接口,可以用于服务端接口.客户端调用服务之用) /** * */ package com.junge.demo.protocol.model; import java ...

  4. Django(序列化、SweetAlert插件)

    day72 参考:https://www.cnblogs.com/liwenzhou/p/8718861.html#autoid-6-1-2 前端序列化 后端序列化 day73中 补充一个SweetA ...

  5. 二进制加法Java实现

    二进制整数的Java实现 任意两个二进制数(不论在什么位置)相加,只可能出现4种情况.它们是: 0+0=0 1+0=0+1=1 1+1=10=0+向高一位的进位1 1+1+1=11=1+向高一位的进位 ...

  6. PHP注释

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

  7. Servlet案例6：显示用户的上次访问时间

    这里是cookie的简单应用 告诉用户您的上次访问时间是:xxxx-xx-xx xx:xx:xx 思路: 第一次访问该网站时候,记录当前访问时间(new Date()) 把当前时间以cookie的形式 ...

  8. GraphQL：你的容颜，十万光年

    What? GraphQL 是一种类似于 SQL 的结构化查询语言,由 facebook 于2012年创造,于2015年开源.SQL 在服务端定义,GraphQL 在客户端定义,也就是说 GraphQ ...

  9. Linux - 日志文件简介

    Linux日志文件绝大多数存放在/var/log目录,其中一些日志文件由应用程序创建,其他的则通过syslog来创建. Linux系统日志文件通过syslog守护程序在syslog套接字/dev/lo ...

  10. [视频]K8飞刀 解密菜刀后门教程

    链接:https://pan.baidu.com/s/1raC1S_njxeqS7TaiTN6jLA 提取码:otmb