<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. mysql windows 5.7 安装版下载地址

    https://dev.mysql.com/downloads/windows/installer/5.7.html

  2. 11g统计信息自动收集任务

    1.查看统计信息自动收集任务的开启情况. select client_name,status from dba_autotask_client; 2.查看自动收集任务各个窗口的开启情况. col op ...

  3. 3.装配Bean 基于XML

    一.实例化方式 3种bean实例化方式:默认构造.静态工厂.实例工厂 1.默认构造 <bean id="" class=""> 必须提供默认构造 2 ...

  4. 下单快发货慢：一个 JOIN SQL 引起 SqlClient 读取数据慢的奇特问题

    最近遇到一个非常奇特的问题,在一个 ASP.NET Core 项目中从 SQL Server 2008 R2 中查询获取 100 条记录竟然耗时 10 多秒,如果是查询本身慢,那到不是什么奇特的问题. ...

  5. Spring事务管理（详解+实例）

    1 初步理解 理解事务之前,先讲一个你日常生活中最常干的事:取钱. 比如你去ATM机取1000块钱,大体有两个步骤:首先输入密码金额,银行卡扣掉1000元钱:然后ATM出1000元钱.这两个步骤必须是 ...

  6. 使用NetTcpBinding，WCF服务未能被激活

    我的WCF采用的是NetTcpBinding,使用时就会报错,换成BasicHttpBinding,就一切正常 The requested service, 'net.tcp://wcf.xxxxx. ...

  7. centos7 安装oracle11g

    创建数据库的系统用户和用户组 $ su root #切换到root # groupadd oinstall #创建用户组oinstall # groupadd dba #创建用户组dba # user ...

  8. JavaScript中继承的那些事

    引言 JS是一门面向对象的语言,但是在JS中没有引入类的概念,之前特别疑惑在JS中继承的机制到底是怎样的,一直学了JS的继承这块后才恍然大悟,遂记之. 假如现在有一个“人类”的构造函数: functi ...

  9. GraphX之Pregel（BSP模型-消息传递机制）学习

    /* * Licensed to the Apache Software Foundation (ASF) under one or more * contributor license agreem ...

  10. 工厂模式-Spring的InitializingBean实现

    一.创建产品角色接口: package org.burning.sport.design.pattern.factorypattern.spring.factory; public interface ...