任何元素都可以设置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. 
						
  2. 【CF1157F】Maximum Balanced Circle 求一个相邻元素之间绝对值为小于1的最大环
		
    题目: https://codeforces.com/contest/1157/problem/F 给出一个序列 , 我们要从序列里面挑出一些数构造成一个相邻元素之间绝对值为小于1的最大环 , 挑选的 ...
    
		
    3. 
						
  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. 
						
  4. 相邻元素margin的自动合并与float的坑
		
    css中相邻元素的margin其实是会自动合并的,且取较大值. <!DOCTYPE html> <html lang="en"> <head>  ...
    
		
    5. 
						
  5. 垂直相邻margin合并解决方法
		
    块级元素的垂直相邻外边距会合并,水平边距永远不会重合. 行内元素实际上不占上下外边距,左右外边距也不会合并.浮动元素的外边距也不会合并. 外边距重叠的意义 外边距的重叠只产生在普通流文档的上下外边距之 ...
    
		
    6. 
						
  6. margin叠加相邻两个元素的上下margin是叠加在一起
		
    <!doctype html><html><head><meta charset="utf-8"><title>无标题文 ...
    
		
    7. 
						
  7. 【深入BFC】 关于CSS中float布局，清除浮动，和margin合并的原理解析，解开你心中的那些困惑！
		
    BFC的通俗理解: Block Formatting Context(块级格式化上下文)是W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用.  ...
    
		
    8. 
						
  8. 父元素与子元素之间的margin-top问题
		
    父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. html代码: <div c ...
    
		
    9. 
						
  9. 清除inline-block元素之间的空白
		
    一个元素如果被设置为display:inline-block,那么这个元素将表现为行内块的性质.被设为行内块的元素 对内(子元素)表现为块级框,具体为可以设置高度宽度,可以设置垂直margin和pad ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Java实现冗余路径Redundant Paths
			
    Description In order to get from one of the F (1 <= F <= 5,000) grazing fields (which are numb ...
    
			
    2. 
						
  2. HTML5 3D 粒子波浪动画特效DEMO演示
			
    需要thress.js插件:     http://github.com/mrdoob/three.js // three.js - http://github.com/mrdoob/three.js ...
    
			
    3. 
						
  3. CentOS 7 源码编译安装PostgreSQL 9.5
			
    下载 在postgresql的官方即可找到源码文件目录,地址如下:https://www.postgresql.org/ftp/source/,在下载列表中根据需求选择版本,进入子目录后,可以看到文件 ...
    
			
    4. 
						
  4. apache 2.4 httpd 2.4.6 反向代理后端的服务为HTTPS https 基于centos7
			
    需求场景:通过访问apache的http地址,反向代理访问后端的https服务,而且路径带有只能特定模块才反向代理 配置如下 listen <VirtualHost *:> #管理员邮箱  ...
    
			
    5. 
						
  5. Shell语法规范
			
    ver:1.0 博客:https://www.cnblogs.com/Rohn 本文介绍了Shell编程的一些语法规范,主要参考依据为谷歌的Shell语法风格. 目录 背景 使用哪一种Shell 什么 ...
    
			
    6. 
						
  6. Java——    一点关于String的转换
			
    在Java学习中,恐怕我们遇到的最多的就是有关String与其他类型的转换了,我们来看一张图: 我们看到对于8种基本数据类型,除去byte和short类型没有外,其他的都有,值得注意的是可以把char ...
    
			
    7. 
						
  7. 在CentOS8下利用seafile软件搭建私有云
			
    一.安装前准备工作 1. 安装EPEL源 EPEL (Extra Packages for Enterprise Linux)是基于Fedora的一个项目,为“红帽系”的操作系统提供额外的软件包,适用 ...
    
			
    8. 
						
  8. 当小程序的flex布局遇到button时，justify-content不起作用的原因及解决方案
			
    当小程序的flex布局遇到button时 发现justify-content不起作用,无论怎么设置都是space-around的效果. 经过排查,发现原因是小程序button中的默认样式中的margi ...
    
			
    9. 
						
  9. Java中Clob类型转换成String类型的问题
			
    1.问题: 项目中使用druid+达梦数据库(基本类似Oracle),查出的Clob类型数据在运行时为ClobProxyImpl对象而不是内容,不能转为字符串 2.原代码: map为达梦数据库或Ora ...
    
			
    10. 
						
  10. Java根据模板生成Word文档
			
    一,首先制作模板 1.先做一个Word文档, 2.打开Word,然后另存为*.xml文件 3.最后修改*.xml文件的后缀名为*.ftl 二,打开项目编辑器Idea,在pom文件中引入相关架包依赖(我 ...
    
			
    11.