盒子的margin属性

        盒子的外边距margin 指的是当前盒子与其他盒子之间的距离，环绕在盒子周围的空白区域，属于不可见的区域，，不会影响到可见框的大小，而是会影响到盒子的位置。

margin属性可以用来指定盒子外边框的大小，有两种方法设置外边距：第一种单独属性分别设置四个方向的外边距，第二种是使用简写属性同时设置多个方向的外边距（注意顺序），margin 属性接受任何长度单位，可以是像素px、英寸in、毫米mm或 em

一、单独属性设置各个方向外边距

盒子有四个方向的外边距。

  • margin-top  上外边距，盒子的上边框与其他盒子的距离；
  • margin-left  左外边距，盒子的左边框与其他盒子的距离；
  • margin-right  右外边距，盒子的右边框与其他盒子的距离；
  • margin-bottom  底外边距，盒子的底边框与其他盒子的距离。

示例代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>margin</title>

     <style type="text/css">

     .box1{

         width: 200px;

         height:200px;

         background-color: #bfa;

         border:1px solid red;

         margin-top: 10px;

         margin-left: 30px;

         margin-right: 20px;

         margin-bottom: 40px;

     }

     </style>

 </head>

 <body>

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

 </body>

 </html>

表现效果

注意：由于页面中的元素都是靠左靠上对齐。

  • 所以设置上，左外边距的时候，改变的盒子的自身位置；
  • 如果设置右，下外边距的时候，当会改变其他盒子的位置。

二、外边距简写属性（值复制）同时设置四个方向的外边距(顺序和边框和内边距、边框一样)

  • 指定四个值，分别设置 上10px，右20px，下30px，左40px，按照顺时针方向；
  • margin:10px 20px 30px 40px;
  • 指定三个值，第一个值10px设置给上，第二个20px设置给左和右，第三个30px设置给下外边距；
  • margin:10px 20px 30px;
  • 指定两个值，第一个值10px设置给上下外边距，第二个值20px设置给左右外边距；
  • margin:10px 20px;
  • 指定一个值，四边外边距使用同一个值，上下左右都是10像素；
  • margin:10px;

设置外边距，就相当于扩大了元素实际所占页面的大小。外边距可以接受任何长度单位，可以是百分数，也可以为负值(如果外边距设置的是负值，则会把元素往反方向移动)。

  • 还可以为 margin 设置一个百分比数值  p{ margin：10px}

百分数是相对于父元素的 width 计算的。上面这个例子为 p 元素设置的外边距是其父元素的 width 的 10%。

  • 当外边距为正值时  margin：50px

  • 当外边距为负值时 margin：-100px

三、margin还可以设置auto值水平居中

auto只设置给水平方向的margin(水平方向，指的是左右外边距)

1、如果希望除了左外边距以外所有其他外边距都是 auto（左外边距是 20px）：

p {margin: auto auto auto 20px;}这样才能得到你想要的效果。如果只是希望控制元素单边上的外边距，可使用单边外边距属性。

2、如果只指定左外边距或者右外边距margin为auto，就是左右外边距设置为最大居中，垂直方向外边距如果设置为auto，则外边距设置为0。
左右同时设置为auto，两侧外边距同时设置为相同的值(可以使子元素在父元素水平居中)
margin:0 auto；     和margin：auto；表达效果一致

四、默认值

Netscape 和 IE 对 body 标签定义的默认边距（margin）值是 8px。而 Opera 不是这样。相反地，Opera 将内部填充（padding）的默认值定义为 8px，因此如果希望对整个网站的边缘部分进行调整，并将之正确显示于 Opera 中，那么必须对 body 的 padding 进行自定义。

margin 的默认值是 0，所以如果没有为 margin 声明一个值，就不会出现外边距。

但是，在实际中，浏览器对许多元素已经提供了预定的样式，外边距也不例外。例如，在支持 CSS 的浏览器中，外边距会在每个段落元素的上面和下面生成“空行”。因此，如果没有为 p 元素声明外边距，浏览器可能会自己应用一个外边距。当然，只要你特别作了声明，就会覆盖默认样式。

垂直外边距的重叠（合并）

在网页中，垂直方向的相邻外边距会发生外边距重叠。所谓外边距重叠是指兄弟元素之间的相邻外边距会取外边距的最大值而不是外边距之和。

发生外边距重叠有两个要件：⑴必须是相邻的；    ⑵垂直方向上的

实例一：

1、同时设置两个div的盒子，给上面的盒子设置底面外边距为100px，给下面的盒子设置顶部外边距为100px。那么两个盒子之间的效果还是100px。

 <!DOCTYPE html>

 <html lang="en">

 <head>

  <meta charset="UTF-8">

  <title>margin</title>

  <style type="text/css">

  .box2{

   width: 200px;

   height:200px;

   background-color: #234;

   border:1px solid blue;

   margin-bottom:100px;}

  .box1{

   width: 200px;

   height:200px;

   background-color: #bfa;

   border:1px solid red;

   margin-top:100px;

  }

  </style>

 </head>

 <body>

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

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

 </body>

 </html>

2、假设底面盒子的上外边距设置为200px，那么两个盒子之间的距离就变成了200px(取最大值)。

3、在相邻的两个div元素中间插入一个数字，字母(或者是其他的内容)，使这两个元素不再相邻，那么他们之间的距离就是两个外边距之和再加上所插入的内容的高度。

实例二：

一个div父元素中，嵌套一个小的div子元素。为子元素设置一个上外边距，目的是使子元素的位置发生改变，下移。

当给子元素设置了margin-top:100px

预想的效果应该是子元素在父元素中的位置下移100px的。

但是父元素和子元素保持了原来的相对位置一起向下移动了100px。

注意： 如果父子元素的垂直外边距相邻了，那么子元素的外边距会传递给父元素。

解决方法：
1、加内容，父元素子元素之间插入一个内容，再设置子元素的margin   (原理使父元素和子元素不再是相邻关系)
2、加内边距，给父元素设置一个内边距，但是整个父元素的高度会增加，所以需要在父元素height中减去多出来的部分。(原理，使其不相邻)
3、加边框，给父元素设置一个边框border，再给子元素设置margin   (原理，使父元素和子元素不再是相邻外边距)

从里面选择最简便的方法使用

margin属性以及垂直外边距重叠问题的更多相关文章

  1. __x__(22)0907第四天__ 垂直外边距重叠

    外边距重叠, 也叫“外边距合并”,指的是,当两个外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度,等于两个发生合并的外边距的高度中的较大者...在布局时,易造成混淆. 1. 上下元素 垂直外 ...

  2. __x__(43)0910第六天__ clearfix 解决：垂直外边距重叠，高度塌陷

    <div class="box1"> <tabl></table> <div class="box2">< ...

  3. Margin的垂直外边距问题

    做练习的时候遇到一个margin的问题,代码结构如下,给父元素body中的子元素div设置了margin:50px auto;本来我是想让子元素div距离父元素上边拉开50个像素,结果却是子元素div ...

  4. 文本溢出、垂直外边距合并、BFC、hasLayout

    今天学习文本溢出,又遇到了一些小问题,先上图: 关于文本溢出推荐:http://www.cnblogs.com/yzg1/p/5089534.html 从里面学习到单行文本和多行文本溢出, overf ...

  5. css盒子模型、垂直外边距合并

    css盒子模型由四部分组成:内容(content).填充(padding).边框(border).边距(margin),其中css样式中定义的width属性是定义内容区域的宽度,正常情况下,设置了内容 ...

  6. 【css基础】垂直外边距的合并

    近期在重温<CSS权威指南>,还是想把基础再打坚固点,如今对垂直外边距的合并问题进行简单总结. 1. 两个块级元素的外边距都大于0时,取那个最大值作为两个块级元素的垂直边距 请看以下一个小 ...

  7. “margin塌陷” 嵌套盒子外边距合并现象

    来源于官方文档对于外边距合并的解释: 注释:只有普通文档流中块框的垂直外边距才会发生外边距合并.行内框.浮动框或绝对定位之间的外边距不会合并. 出现外边距塌陷的三种情况: 1.相邻兄弟元素之间 若两者 ...

  8. CSS 垂直外边距合并：规范、延伸、原理、解决办法

    <CSS 权威指南>第七章基本视觉格式化.p192,提到了 垂直外边距合并 的情况,解释总体算清晰,但是感觉不全且没有归纳成一条一条的,参考 CSS框模型中外边距(margin)折叠图文详 ...

  9. CSS min-height不能解决垂直外边距合并问题

    垂直外边距合并有一种情况是嵌套元素的垂直外边距合并,当父级元素没有设定外边距时,在顶部或者底部边缘的子元素的垂直外边距就会和父级的合并,导致父级也有了“隐形”的垂直外边距. 当父级元素的min-hei ...

随机推荐

  1. 我在DBGridEh增加一栏复选框及对应操作的解决方案

    最近客户有个需求,要求对单据列表里指定的单据进行批量审核,很自然的,我想到了在DBGridEh增加一栏复选框的列,审核时遍历所有单据,将打了勾的单据审核就可以了.查阅了网上很多文章,不外有2个方案,1 ...

  2. tomcat 404 The origin server did not find a current representation for the target resource or is not willing to disclose that one exists.

    1.原因 tomcat没有找到项目,因为是用eclipse启动的,不是在tomcat的目录下启动,所以我们需要在eclipse下配置启动目录,好让tomcat找到项目. 2.解决 用本地安装的tomc ...

  3. 你知道e.g.和i.e.的区别吗？

    见 i.e. 是对前面的完全举例,特指 e.g. 则是不完全举例,有可能是...也有可能是...还可能是其他. 注意,i.e. 和 e.g. 第二个点后面都常跟一个逗号.

  4. 【Python】我的第一个完整的小说爬虫

    写在开头 纪念我的第一个爬虫程序,一共写了三个白天,其中有两个上午没有看,中途遇到了各种奇怪的问题,伴随着他们的解决,对于一些基本的操作也弄清楚了.果然,对于这些东西的最号的学习方式,就是在使用中学习 ...

  5. kafak学习(一)

    发布与订阅消息系统. 数据(消息)的发送者不会直接把消息发送给接受者,这是发布与订阅消息系统的一个特点.发布者以某种方式对消息进行分类,接受者订阅他们,以便接受特定类型的消息.发布与订阅系统一般会有一 ...

  6. Spring Boot 为什么这么火？（二）

    Spring Boot 的火 网上连载了 Spring Boot 系列文章,没想到这一开始便与 Spring Boot 深度结缘. 技术社区 Spring Boot 的文章越来越多:Spring Bo ...

  7. 【Linux-驱动】驱动策略----自旋锁

    自旋锁 自旋锁最多只能被一个内核任务持有.要是锁未被持有,请求它的内核任务便会立即得到它并继续执行.如果一个内核任务试图请求一个已经被别的内核任务持有的自旋锁,那么CPU就会一直尽心循环---旋转-- ...

  8. 使用Oracle12c 以上的PDB创建数据库用户 密码过期的简单处理

    1. 先通过监听查看PDB的名字 Windows 打开命令行: 输入命令 lsnrctl status 一般在如图示的最下面 2. 也可以通过GS的全局配置文件来查看 数据库连接SID信息. C:\P ...

  9. WHY吃糖果 QDUOJ 二分嵌套

    WHY吃糖果 QDUOJ 二分嵌套 原题链接 解题思路参考链接 题意 给出一个\(n*n\)的矩阵,每个格子的权值为\(i*i+j*j+i*j+100000*(i-j)\),求该矩阵中第m小的权值为多 ...

  10. Antd时间选择框汉化问题总结------国际化全局设置

    import zh_CN from 'antd/lib/locale-provider/zh_CN'; import 'moment/locale/zh-cn'; import { ConfigPro ...