任何元素都可以设置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实现第六届蓝桥杯密文搜索

    密文搜索 福尔摩斯从X星收到一份资料,全部是小写字母组成. 他的助手提供了另一份资料:许多长度为8的密码列表. 福尔摩斯发现,这些密码是被打乱后隐藏在先前那份资料中的. 请你编写一个程序,从第一份资料 ...

  2. java实现第四届蓝桥杯颠倒的价牌

    颠倒的价牌 题目描述 小李的店里专卖其它店中下架的样品电视机,可称为:样品电视专卖店. 其标价都是4位数字(即千元不等). 小李为了标价清晰.方便,使用了预制的类似数码管的标价签,只要用颜色笔涂数字就 ...

  3. 关于晶体问题TCXO_14.7456MHZ

    如何判断热点的晶体好不好,首先,看偏移,偏移为0的晶体一般就是温补晶体,当然偏移是500或者几百固定的也是温补,但是不是我们首选的温补晶体 因为偏移为0非常省事,这是系统默认的偏移0,因此设置好频率就 ...

  4. 【雕爷学编程】MicroPython动手做（08）——零基础学MaixPy之识别颜色

    早上用百度搜了一下“颜色识别”,多少有了一点大致的概念,还是老办法,动手做,多实验,往前走,还请各位老师多多指点. OpenCV(百度百科)是一个基于BSD许可(开源)发行的跨平台计算机视觉库,可以运 ...

  5. Node.js躬行记（3）——命令行工具

    一.自定义 创建一个空目录,然后通过npm init命令初始化package.json文件,并按提示输入相关信息或直接回车使用默认信息,生成的内容如下所示. { "name": & ...

  6. Grafana 插件地图Worldmap不显示

    介绍 最近上了ELK 日志分析,想着手看下用户的分布情况,在kibana 中展示用户分布情况是没有问题的,但是索引添加到Granfana 中的话就无法展示. 问题描述 添加ES索引以后,map地图一片 ...

  7. Python简单http服务实现

    1.代码实现 # -*- coding: utf-8 -*-"""Created on Tue Jun 11 18:12:01 2019 @author: wangymd ...

  8. ubuntu12.04 qtcreate支持中文输入

    1.sudo apt-get install ibus-qt4 2.重启电脑 reboot

  9. 线上服务的FGC问题排查，看这篇就够了！

    线上服务的GC问题,是Java程序非常典型的一类问题,非常考验工程师排查问题的能力.同时,几乎是面试必考题,但是能真正答好此题的人并不多,要么原理没吃透,要么缺乏实战经验. 过去半年时间里,我们的广告 ...

  10. Tensorflow从0到1(4)之神经网络

    一维数据集上的神经网络 # 1 引入包,创建会话 import tensorflow as tf import numpy as np sess = tf.Session() # 2 初始化数据 da ...