任何元素都可以设置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. PAT 反转链表

    给定一个常数 K 以及一个单链表 L,请编写程序将 L 中每 K 个结点反转.例如:给定 L 为 1→2→3→4→5→6,K 为 3,则输出应该为 3→2→1→6→5→4:如果 K 为 4,则输出应该 ...

  2. mysql常见聚合函数

    count():总数量avg():平均数std():标准差sum():求和max():最大值min():最小值 上面的不过多介绍group_concat():分组列值全部展示到一行eg:mysql&g ...

  3. PyQt5 模块modules

    The QtCore module contains the core non-GUI functionality. This module is used for working with time ...

  4. python2.7 函数的参数学习

    1.默认参数 默认参数可以简化函数的调用. 设置默认参数时,有几点要注意: 一.必选参数在前,默认参数在后,否则Python的解释器会报错. 二.当函数有多个参数时,把变化大的参数放前面,变化小的参数 ...

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

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

  6. Visible Lattice Points（规律题）【数学规律】

    Visible Lattice Points 题目链接(点击) Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 9031   ...

  7. 青蛙的约会 (ax+by=c求最小整数解)【拓展欧几里得】

                                                  青蛙的约会(点击跳转) 两只青蛙在网上相识了,它们聊得很开心,于是觉得很有必要见一面.它们很高兴地发现它们住 ...

  8. [.NET 开源] 高性能的 Swifter.MessagePack 已发布，并附带新版本的 Swifter.Json 和 Swifter.Data。

    抱歉各位朋友,由于各种私事公事,本应该在 19 年底发布的 Swifter.MessagePack 库延迟了这么久才发布,我深感抱歉. MsgPack 简介 MsgPack 一种非常轻巧的二进制数据交 ...

  9. Quartz.Net系列（七）：Trigger之SimpleScheduleBuilder详解

    所有方法图 1.SimpleScheduleBuilder RepeatForever:指定触发器将无限期重复. WithRepeatCount:指定重复次数 var trigger = Trigge ...

  10. Linux常用命令之文件磁盘管理

    前言 本文知识点是曾经学习过程中收录整理的,方便学习使用. 一>Linux常用基本命令 Linux命令格式:command [-options] [parameter1] ... command ...