margin

外边距，表示边框到最近盒子的距离。

对于左右两边

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>流浪者</title>
     <style>
         *{
             padding: 0px;
             margin: 0px;
         }
         .box1{
             width: 200px;
             height: 200px;
             background-color: red;
             display: inline-block;
             margin-right: 20px;
         }
         .box2{
             width: 200px;
             height: 200px;
             background-color: green;
             display: inline-block;
             margin-left: 20px;
         }
     </style>

 </head>
 <body>

 <span class="box1"></span>
 <span class="box2"></span>

 </body>
 </html>

对于上下盒子

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>流浪者</title>
     <style>
         *{
             padding: 0px;
             margin: 0px;
         }
         .box1{
             width: 200px;
             height: 200px;
             background-color: red;
             display: block;
             margin-bottom: 20px;
         }
         .box2{
             width: 200px;
             height: 200px;
             background-color: green;
             display: block;
             margin-top: 60px;
         }
     </style>

 </head>
 <body>

 <span class="box1"></span>
 <span class="box2"></span>

 </body>
 </html>

这种现象叫做margin塌陷问题，当给两个标准文档流下的盒子设置垂直方向上的margin时，以较大的为准。

当我们给两个标准流下的兄弟盒子设置浮动之后，它们脱离了标准文档流，就不会出现margin塌陷的问题。

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>流浪者</title>
     <style>
        *{
             padding: 0;
             margin: 0;
         }
         .father{
             width: 400px;
             overflow: hidden;
             border: 1px solid gray;
         }
         .box1{
             width: 300px;
             height: 200px;
             background-color: red;
             margin-bottom: 20px;
             float: left;
         }
         .box2{
             width: 400px;
             height: 300px;
             background-color: green;
             margin-top: 50px;
             float: left;
         }

     </style>

 </head>
 <body>

 <div class="father">
     <div class="box1"></div>
     <div class="box2"></div>
 </div>

 </body>
 </html>

margin：0  auto；

设置标准文档流下的盒子居中。

如果给盒子设置了浮动，则margin：0 auto失效。

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>流浪者</title>
     <style>
        *{
             padding: 0;
             margin: 0;
         }
         .box1{
             width: 200px;
             height: 200px;
             background-color: red;
             margin: 0 auto;
         }
         .box2{
             width: 400px;
             height: 300px;
             background-color: green;
         }

     </style>

 </head>
 <body>

 <div class="box1"></div>
 <div class="box2"></div>

 </body>
 </html>

使用margin：0 auto;注意点：

1.使用margin: 0 auto;水平居中盒子必须有width，要有明确width，文字水平居中使用text-align: center;

2.只有标准流下的盒子 才能使用margin:0 auto;

当一个盒子浮动了，固定定位，绝对定位(后面会讲)，margin:0 auto; 不能用了

3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center;

作者：流浪者

日期：2019-08-31

07-简单认识margin的更多相关文章

  1. MySQL实战 | 06/07 简单说说MySQL中的锁

    原文链接:MySQL实战 | 06/07 简单说说MySQL中的锁 本文思维导图:https://mubu.com/doc/AOa-5t-IsG 锁是计算机协调多个进程或纯线程并发访问某一资源的机制. ...

  2. 简单属性margin和padding

    关于margin属性的介绍 margin:20px 上 右 下 左 都是20px margin:20px 40 px 上 下 20px 左 右 40px margin:20px 40px  60px ...

  3. TERSUS无代码开发(笔记07)-简单实例手机端后台逻辑开发

    提交申请逻辑开发 1.添加父级对象引用(从父级对象中获取前端输入框的值) 1.设计数据库表(表名和字段名称不能用中文) 2.设计置数据库主键(可设联合主键) 3.传值形成数据实列处理 4.服务器端处理 ...

  4. ThinkPhp学习07

    原文:ThinkPhp学习07 简单CRUD操作 public function show() { $m=M('User'); // $arr=$m->find(2); //查找id=2的数据, ...

  5. a标签和p标签不能设置margin

    经常会发现正常div的属性在a标签上或者p标签上都不管用,这是因为a标签和p标签都不是盒子模型. 例如: <div style="margin-top:5px;">&l ...

  6. margin和padding的四种写法

    我们经常会看到CSS样式属性中外边距margin和内边距padding的各种用法,这里做一个小结,但只简单介绍margin,因为它们的用法大同小异. 方法一. margin:10px; //4个外边距 ...

  7. TERSUS无代码开发(笔记08)-简单实例电脑端后台逻辑开发

    主管审批功能逻辑开发 1.查询逻辑开发(查询待审批记录) 2.批准处理(将选中的一条记录进行批准处理)  =============================================== ...

  8. TERSUS无代码开发(笔记06)-简单实例手机端页面设计

    手机端的设计 1.页面说明 2.默认页面===>提交请假单(上面页面双击进入,页面主要编辑区) 2.1默认页面===>提交请假单===>头部区(页面部份主要编辑区01) 2.1.1默 ...

  9. Java 环境下使用 AES 加密的特殊问题处理

    在 Java 环境下使用 AES 加密,在密钥长度和字节填充方面有一些比较特殊的处理. 1. 密钥长度问题 默认 Java 中仅支持 128 位密钥,当使用 256 位密钥的时候,会报告密钥长度错误 ...

  10. css 描述css reset的作用和用途。

    描述css reset的作用和用途. 作用 : 因为浏览器的品种很多,每个浏览器的默认样式也是不同的.通过重新定义标签样式.“覆盖”浏览器的CSS默认属性. 有最简单的*{margin:0 ;  pa ...

随机推荐

  1. Keras（三）backend 兼容 Regressor 回归 Classifier 分类 原理及实例

    backend 兼容 backend,即基于什么来做运算 Keras 可以基于两个Backend,一个是 Theano,一个是 Tensorflow 查看当前backend import keras ...

  2. ios APP上的自动化测试

    1. 下载 http://blog.manbolo.com/2012/04/08/TestAutomation.zip%20 2. 开发工具安装:http://jingyan.baidu.com/ar ...

  3. hdu 1028 Ignatius and the Princess III 母函数

    Ignatius and the Princess III Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K ...

  4. CF1005C Summarize to the Power of Two 暴力 map

    Summarize to the Power of Two time limit per test 3 seconds memory limit per test 256 megabytes inpu ...

  5. codeforces 459 E. Pashmak and Graph（dp）

    题目链接:http://codeforces.com/contest/459/problem/E 题意:给出m条边n个点每条边都有权值问如果两边能够相连的条件是边权值是严格递增的话,最长能接几条边. ...

  6. .NET Core CSharp 中级篇2-8 特性标签

    .NET Core CSharp 中级篇2-8 本节内容为特性标签 简介 标签Attribute是一个非常重要的技术,你可以使用Attribute技术优化精简你的代码.特性标签可以运用在程序集,模块, ...

  7. [系列] go-gin-api 路由中间件 - 捕获异常（四）

    概述 首先同步下项目概况: 上篇文章分享了,路由中间件 - 日志记录,这篇文章咱们分享:路由中间件 - 捕获异常.当系统发生异常时,提示 "系统异常,请联系管理员!",同时并发送 ...

  8. lambda表达式排序

    lambda表达式排序简洁 1.给一个字符串数组: String[] atp = {"2016-06-28 08:00:00", "2017-12-05 19:17:32 ...

  9. Map四种获取key和value值的方法，以及对map中的元素排序（转）

    获取map的值主要有四种方法,这四种方法又分为两类,一类是调用map.keySet()方法来获取key和value的值,另一类则是通过map.entrySet()方法来取值,两者的区别在于,前者主要是 ...

  10. .NET框架之“小马过河”

    .NET框架之"小马过河" 有许多流行的.NET框架,大家都觉得挺"重",认为很麻烦,重量级,不如其它"轻量级"框架,从而不愿意使用.面对形 ...