任何元素都可以设置border 设置宽高可能无效 
行内元素设置padding，margin上下是无效的，左右是有效的

外边距合并：指的是，当两个垂直外边距相遇时，它们将形成一个外边距。 
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 
外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。

简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图： 

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="utf-8">

     <style type="text/css">

         * {

           margin:;

           padding:;

           border:;

         }

         #d1 {

           width:100px;

           height:100px;

           margin-top:20px;

           margin-bottom:20px;

           background-color:red;

         }

         #d2 {

           width:100px;

           height:100px;

           margin-top:10px;

           background-color:blue;

         }

     </style>

 </head>

 <body>

 <div id="d1">

 </div>

 <div id="d2">

 </div>

 <p>请注意，两个 div 之间的外边距是 20px，而不是 30px（20px + 10px）。</p>

 </body>

 </html>

51220网站目录 https://www.51220.cn

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图： 

 <!DOCTYPE html>

 <html  lang="en">

 <head>

     <meta charset="utf-8">

     <style type="text/css">

         * {

           margin:;

           padding:;

           border:;

         }

         #outer {

           width:300px;

           height:300px;

           background-color:red;

           margin-top:20px;

         }

         #inner {

           width:50px;

           height:50px;

           background-color:blue;

           margin-top:10px;

         }

     </style>

 </head>

 <body>

 <div id="outer">

   <div id="inner">

   </div>

 </div>

 <p>注释：请注意，如果不设置 div 的内边距和边框，那么内部 div 的上外边距将与外部 div 的上外边距合并（叠加）。</p>

 </body>

 </html>

尽管看上去有些奇怪，但是外边距甚至可以与自身发生合并。 
假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并： 

如果这个外边距遇到另一个元素的外边距，它还会发生合并： 

 

解决垂直外边距合并问题

两个相邻元素之间的间隔，只有20px；如果我要实现两元素间的间隔是我理想的间隔，即30px,该如果实现呢？方法有以下两个：

给最后面的元素加上浮动（left/right）

给最后一个元素加上display:inline-block;但是IE6和IE7下不完全支持display:inline-block，所以要加上*display:inline;zoom:1即可解决IE6、7的bug;

.box_a{width:50px; height:50px; background:#f00; margin:10px 0;}

.box_b{width:50px; height:50px; background:#f0f; margin:20px 0;display:inline-block;*display:inline; zoom:1;}

 

当子元素都浮动或者display：inline-block时，外边距不再合并

 <!DOCTYPE html>

 <html  lang="en">

 <head>

     <meta charset="utf-8">

     <style type="text/css">

         .box_a{

                 width:50px;

                 background:#f00;

                 display: inline-block;

         }

         .box_b{

                 width:50px;

                 background:#f0f;

                 margin:50px;display:

                 inline-block;

         }

     </style>

 </head>

 <body>

     <div class="box">

         <div class="box_a">

         </div>

         <div class="box_b">

         </div>

     </div>

 </div>

 </body>

 </html>

让a和b不在同一个bfc内

 .box{

             border:1px solid red;

             width: 400px;

         }

         .a{

             width: 400px;

             height: 100px;

             background: olivedrab;

             margin-bottom: 100px;

         }

         .b{

             background: #;

             height: 100px;

             overflow: hidden;

             margin-top: 100px;

         }

         .b-box{

             overflow: hidden;

         }

 <div class="box">

     <div class="a">我是a</div>

     <div class="b-box">

         <div class="b">我是b</div>

     </div>

 </div>

相邻元素之间的margin合并问题的更多相关文章

  1. 日常踩坑 — 相邻元素之间的margin合并问题。

    踩坑:使用v-for渲染的组件,当然图中的id已经换成class,还是没有解决这个问题,于是各种查找资料,我就不信简单的CSS问题这么难解决! v-for渲染组件级传值: <div class= ...

  2. 【CF1157F】Maximum Balanced Circle 求一个相邻元素之间绝对值为小于1的最大环

    题目: https://codeforces.com/contest/1157/problem/F 给出一个序列 , 我们要从序列里面挑出一些数构造成一个相邻元素之间绝对值为小于1的最大环 , 挑选的 ...

  3. Codeforces Round #283 (Div. 2) A. Minimum Difficulty【一个数组定义困难值是两个相邻元素之间差的最大值。 给一个数组，可以去掉任意一个元素，问剩余数列的困难值的最小值是多少】

    A. Minimum Difficulty time limit per test 2 seconds memory limit per test 256 megabytes input standa ...

  4. 相邻元素margin的自动合并与float的坑

    css中相邻元素的margin其实是会自动合并的,且取较大值. <!DOCTYPE html> <html lang="en"> <head> ...

  5. 垂直相邻margin合并解决方法

    块级元素的垂直相邻外边距会合并,水平边距永远不会重合. 行内元素实际上不占上下外边距,左右外边距也不会合并.浮动元素的外边距也不会合并. 外边距重叠的意义 外边距的重叠只产生在普通流文档的上下外边距之 ...

  6. margin叠加相邻两个元素的上下margin是叠加在一起

    <!doctype html><html><head><meta charset="utf-8"><title>无标题文 ...

  7. 【深入BFC】 关于CSS中float布局，清除浮动，和margin合并的原理解析，解开你心中的那些困惑！

    BFC的通俗理解: Block Formatting Context(块级格式化上下文)是W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. ...

  8. 父元素与子元素之间的margin-top问题

    父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. html代码: <div c ...

  9. 清除inline-block元素之间的空白

    一个元素如果被设置为display:inline-block,那么这个元素将表现为行内块的性质.被设为行内块的元素 对内(子元素)表现为块级框,具体为可以设置高度宽度,可以设置垂直margin和pad ...

随机推荐

  1. Java实现第九届蓝桥杯书号验证

    书号验证 2004年起,国际ISBN中心出版了<13位国际标准书号指南>. 原有10位书号前加978作为商品分类标识:校验规则也改变. 校验位的加权算法与10位ISBN的算法不同,具体算法 ...

  2. 【Jquery】根据元素个数给予宽度

    方法一: $(document).ready(function(){ $(".xn_mc_solu_2_ul").css("width", $(".x ...

  3. Zabbix+Orabbix监控oracle数据库表空间

    Orabbix 是设计用来为 zabbix 监控 Oracle 数据库的插件,它提供多层次的监控,包括可用性和服务器性能指标. 它提供了从众多 oracle 实例采集数据的有效机制,进而提供此信息的监 ...

  4. Cypress系列（14）- 环境变量详解

    如果想从头学起Cypress,可以看下面的系列文章哦 https://www.cnblogs.com/poloyy/category/1768839.html 前言 环境变量,其实就是根据环境的变化, ...

  5. ORM框架 Mybatis、Hibernate、Spring Data JPA之到底该用谁，谁更牛*

    在持久层框架中无可厚非的就是mybatis了,但是也会经常被人问到为啥要用mybatis,为啥不用hibernate,jpa.很多人各级都是地铁爷爷看手机的表情,似乎从来没想过这个问题.“公司叫用我就 ...

  6. skfpdb.db、cc3268.dll、system_V2.dat、JI60JS.dat文件内容、发票数据查询

    cc3268.dll.skfpdb.db.xxxxx_V2.dat,system.dat,JI60JS.dat,log.dat,system_V2.dat,JI60JS_V2.dat,log_V2.d ...

  7. Zookeeper——基本使用以及应用场景（手写实现分布式锁和rpc框架）

    文章目录 Zookeeper的基本使用 Zookeeper单机部署 Zookeeper集群搭建 JavaAPI的使用 Zookeeper的应用场景 分布式锁的实现 独享锁 可重入锁 实现RPC框架 基 ...

  8. visual studio 2005/2010/2013/2015/2017 vc++ c#代码编辑常用快捷键-代码编辑器的展开和折叠

    visual studio 2005/2010/2013/2015/2017 vc++ c#代码编辑快捷键-代码编辑器的展开和折叠 VS2015代码编辑器的展开和折叠代码确实很方便和实用.以下是展开代 ...

  9. 使用Docker构建企业Jenkins CI平台

    在如今的互联网时代,随着软件开发复杂度的不断提高,软件开发和发布管理也越来越重要.目前已经形成一套标准的流程,最重要的组成部分就是持续集成(Continuous Integration,CI)及持续部 ...

  10. 阿里云Ubuntu配置mysql+navicat连接

    一>mysql安装配置(工具:Xshell6) ​ 1.安装mysql apt-get install mysql-server mysql-client ​ 2.查看安装:查看版本 sudo ...