任何元素都可以设置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实现 洛谷 P1085 不高兴的津津

    import java.io.*; import java.util.*; class Main{ public static void main(String args[]) { Scanner s ...

  2. java实现南北朝时

    南北朝时,我国数学家祖冲之首先把圆周率值计算到小数点后六位,比欧洲早了 1100 年! 他采用的是称为"割圆法"的算法,实际上已经蕴含着现代微积分的思想. 如图[1.jpg]所示, ...

  3. akka-typed(4) - EventSourcedBehavior in action

    前面提到过,akka-typed中较重要的改变是加入了EventSourcedBehavior.也就是说增加了一种专门负责EventSource模式的actor, 最终和其它种类的actor一道可以完 ...

  4. tensorflow2.0学习笔记第二章第一节

    2.1预备知识 # 条件判断tf.where(条件语句,真返回A,假返回B) import tensorflow as tf a = tf.constant([1,2,3,1,1]) b = tf.c ...

  5. 聊一聊Asp.net过滤器Filter那一些事

    最近在整理优化.net代码时,发现几个很不友好的处理现象:登录判断.权限认证.日志记录.异常处理等通用操作,在项目中的action中到处都是.在代码优化上,这一点是很重要着力点.这是.net中的过滤器 ...

  6. 在WinForms里嵌入MediaPlayer的一些版本问题, tlbimp导入, 以及不导入而纯用C#+字符串来动态调用.

    网上很多写使用WindowsMediaPlayer WMP控件的文章. 大多数都是从工具栏或COM导入. 最近正在做的CEF整合Asp.Net Core Blazor server side的过程中, ...

  7. RocketMQ系列（三）消息的生产与消费

    前面的章节,我们已经把RocketMQ的环境搭建起来了,是一个两主两从的异步集群.接下来,我们就看看怎么去使用RocketMQ,在使用之前,先要在NameServer中创建Topic,我们知道Rock ...

  8. 【百度前端技术学院 Day7/8】布局

    1. 定位 1.1 文档流 单个元素: 块级元素:内容宽度是其父元素的宽度的100%,并且与其内容一样高. 内联(行内)元素:高宽与他们的内容高宽一样.(所以不能为他们设置宽高) 元素之间的交互: 块 ...

  9. git clone 时注意点

    环境: 在公司访问外网需要设置代理,另外,在公司局域网内架设了一台 GIT 服务器. 在使用 git clone 时,不能设置成 git 使用代理: git config --global http. ...

  10. （四）POI-设置单元格的对其方式

    原文链接:https://blog.csdn.net/class157/article/details/92817149 package com.java.poi; import org.apache ...