<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. wpf使用FFMEPG录制屏幕

    Simple function of recording screen based on ffmpeg Using WPF环境 Visual Studio 2017,dotNet Framework ...

  2. String、StringBuffer、StringBuild的区别

    他们之间的区别主要在两个重大方面 一.处理速度上 StringBuild > StringBuffer > String 原因: String : 它定义为字符串的常量,定以后不能修改 S ...

  3. javascript事件循环

    js单线程 js是单线程的,这样更有利与用户交互以及DOM操作;有关进程与线程的详细解释可以点击传送门:尽管webworker可以实现多线程,但本质上他还属于单线程,由webworker创建的线程都由 ...

  4. 使用config 来管理ssh的会话

    通常利用 ssh 连接远程服务器,一般都要输入以下类型命令: ssh user@hostname -p port 如果拥有多个ssh账号,特别是像我这种喜欢在终端里直接ssh登录, 要记住每个ssh账 ...

  5. Info - 信息获取途径汇总

    目的驱动 大多数情况下,都是为了解决某个问题或完成某项任务,才需要进行针对性的.大范围的.细致化的信息获取. 那么,信息获取的方式和来源,就应该紧紧围绕这个"问题和任务"本身来确定 ...

  6. [视频]K8飞刀 Discuz csrf Exp教程

    [视频]K8飞刀 一键构造Discuz csrf Exp教程 链接:https://pan.baidu.com/s/1tVseP_ZBneKpXQueIncPcA 提取码:6qnh

  7. 课程四(Convolutional Neural Networks)，第一周（Foundations of Convolutional Neural Networks） —— 0.Learning Goals

    Learning Goals Understand the convolution operation Understand the pooling operation Remember the vo ...

  8. android UI：Fragment碎片

    碎片(Fragment) 嵌入与活动中的UI片段,为了合理的分配布局而存在,这是我的简单理解.多用于兼顾手机与平板的UI,也适用于灵活高级的UI制作. Demo 简单的按键切换两片不同的Demo 新建 ...

  9. CSS 基础：文本和字体(4)<思维导图>

    这段时间利用一下间隙时间学习了CSS的基础知识,主要目的是加深对CSS的理解,虽然个人主要工作基本都是后台开发,但是个人觉得系统学习一下CSS的基础还是很有必要的.下面我学习CSS时做的思维导图(全屏 ...

  10. SpringBoot全局配置文件

    SpringBoot项目使用一个全局的配置文件application.properties或者是application.yml,在resources目录下或者类路径下的/config下,一般我们放到r ...