盒子的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. 教你用Python实现简单监督学习算法

    教你用Python实现简单监督学习算法 监督学习作为运用最广泛的机器学习方法,一直以来都是从数据挖掘信息的重要手段.即便是在无监督学习兴起的近日,监督学习也依旧是入门机器学习的钥匙. 这篇监督学习教程 ...

  2. CentOS6.5 编译安装Nginx

    一.准备编译环境 1. 系统为centos6.5最小安装,关闭selinux,关闭防火墙. 2. 安装编译工具 # yum -y install gcc gcc-c++ autoconf automa ...

  3. WebMvcConfigurer 与 WebMvcConfigurationSupport避坑指南

    我们知道,在Spring Boot 2.0后用自己的的配置类继承WebMvcConfigurerAdapter时,idea会提示这个类已经过时了. 通常情况下我们会采用下面两种代替方案: 实现WebM ...

  4. Linux 下创建静态库和动态库

    1.创建静态链接库 2.创建动态链接库

  5. MySQL-快速入门（4）MySQL函数

    1.函数包括:数学函数.字符串函数.日期和时间函数.条件判断函数.系统信息函数.加密函数. 2.数学函数:绝对值函数.三角函数(正弦函数.余弦函数.正切函数.余切函数等).对数函数.随机数函数. 1& ...

  6. Fedora添加软件桌面快捷方式

    以下以添加Eclipse为例 在桌面上新建Eclipse.desktop 文件,向其写入如下代码 [Desktop Entry] Name=Eclipse Comment=用Eclipse开发 Exe ...

  7. 03: 使用docker搭建Harbor私有镜像仓库

    1.1 harbor介绍 1.Harbor简介 1. Harbor是一个用于存储和分发Docker镜像的企业级Registry服务器. 2. 镜像的存储harbor使用的是官方的docker regi ...

  8. jsonp跨域请求的方式

    1.jsonp一种请求方式.用于解决一个棘手的问题: 由于浏览器具有同源策略:即可以通过后台去访问其他网站,而不能通过浏览器(ajax请求)访问其他网页或域(阻止ajax请求,但是无法阻止<sc ...

  9. 使用ajax发送文件的三种方式及预览图片的方法,上传按钮美化

    后端代码 def upload(request): if request.method == "GET": return render(request,'upload.html') ...

  10. 原生ajax与伪ajax

    原生ajax源码 function GetXHR(){ var xhr = null; if(XMLHttpRequest){ xhr = new XMLHttpRequest(); #如果没有XML ...