今天无意中碰到了外边距合并的问题,于是便研究了一下。这里做个笔记。

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

  例如,这里有这样两个块元素: 

<div class="box1"></div>
<div class="box2"></div>

  这里给的样式是: 

.box1{
width:150px;
height:150px;
background:gray;
}
.box2{
width:150px;
height:150px;
background:lightblue;
}

  先来看一下效果:

  

  意料之中的,然后给.box1一个向下的外边距20px,结果为:

  

  也没啥问题,好了,那么我再给.box2一个向上的外边距10px,这里问题就来了。

  

  会发现,这两个元素间的间距并没有发生变化,为什么会这样呢?这是因为他们发生了外边距合并,因为第一个块元素的外边距大于第二个块元素的外边距,二者间的边距便以第一个块元素的外边距为准。

  这里我再代码稍微改一下,变成这样。  

<div class="box1">
<div class="box2"></div>
</div>

  样式变为这样。 

.box1{
width:150px;
height:150px;
background:lightblue;
margin-top:20px;
}
.box2{
width:100px;
height:100px;
background-color: lightgreen;
}

  此时效果相信大家都知道了,可是如果我想让.box2距离的的父元素有一定的上边距该怎么办呢?也许有人会说很简单,我直接给它一个上外边距(margin-top)啊,不好意思,不行,那有人会说那我给它一个上内填充(padding-top)呢?不好意思,还是不行,这么做只会改变该元素的高度,那么应该怎么做呢,其实很简单,就是给它的父元素一个上内填充(padding-top)就行了,当然这里它的父元素的总高度会改变,此时你就要根据具体情况来设置它的height了,具体情况具体分析。

 

  总结:

  1、当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

  2、只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

  3、当一个块元素中嵌套另一个块元素,而想让子块元素距离它的父元素有一定的上边距时,可以给它的父元素一个上内填充(padding-top)便可解决。

  

CSS外边距合并问题的更多相关文章

  1. CSS外边距合并的几种情况

    CSS外边距合并的几种情况 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 外边距在CSS1中就有 The width ...

  2. css外边距合并和z-index的问题

    参考这篇文章, 将外边距的 折叠 参考这篇文章, 将bfc的生成, bfc的应用 参考这篇文章 position: absolute的元素, 仍然具有内填充padding和border边框属性样式, ...

  3. CSS 外边距合并。

    <div id = "parent"> <div id = "child"> demo </div> </div> ...

  4. CSS外边距合并&块格式上下文

    前言问题Margin Collapsing 外边距合并Block Formatting Context 块格式化上下文解决方案参考 前言 之前在前端开发的过程中,都没有遇到外边距合并的问题(其实是因为 ...

  5. CSS外边距合并(塌陷/margin越界)

    原文 简书原文:https://www.jianshu.com/p/5f18f12cd162 大纲 1.什么是外边距合并?(折叠外边距) 2.外边距带来的影响 3.折叠的结果 4.产生折叠的原因 5. ...

  6. CSS 外边距合并

    外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 外边距合并 外边距合并(叠加)是一个相当简单的概念.但是,在实践中对网 ...

  7. CSS框模型(框模型概述、内边距、边框、外边距、外边距合并)

    CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式. 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景. ...

  8. CSS min-height不能解决垂直外边距合并问题

    垂直外边距合并有一种情况是嵌套元素的垂直外边距合并,当父级元素没有设定外边距时,在顶部或者底部边缘的子元素的垂直外边距就会和父级的合并,导致父级也有了“隐形”的垂直外边距. 当父级元素的min-hei ...

  9. 关于CSS inline-block、BFC以及外边距合并的几个小问题

    CSS inline-block和BCF对于初学者来说,总是弄不太明白,下面记录下我在学习这块知识的过程中遇到的几个问题,供大家参考,有不足的地方,欢迎大家批评指正. 一.在什么场景下会出现外边距合并 ...

随机推荐

  1. sqlserver 游标写法

    1.简单游标 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 declare m_cursor cursor scroll for select  Address,People ...

  2. [Tool] Git 使用 与 Git Flow

    目录 简介 Git 命令 Git Flow 简介 Git是目前世界上最先进的分布式版本控制系统(没有之一). Linus花了两周时间自己用C写了一个分布式版本控制系统,这就是Git!一个月之内,Lin ...

  3. jquery中div悬浮嵌套按钮效果

    <div class="btn_sure_cai" style="margin-left: 0px;" onmouseover="show_hi ...

  4. jquery滚动条事件

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  5. 【Android Developers Training】 74. 序言:通过无线连接设备

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  6. 怎么利用composer创建laravel项目

    前提:已经安装了composer的电脑 创建laravel项目: 第一步: 找到你要创建文件的地方 然后打开doc,输入:composer create_project laravel/laravel ...

  7. ==,=和equals()区别

    equals和=,==的区别   一. ==和equals的区别 1. ==是运算符 2. equals是String对象的方法 一般有两种类型的比较 1. 基本数据类型的比较 2. 引用对象的比较 ...

  8. DOCKER 从入门到放弃(二)

    搜索镜像 从docker官方镜像仓库搜索镜像 docker search [OPTIONS] TERM OPTIONS: --automated :只显示自动创建的镜像,默认值为fasle --fil ...

  9. Spring MVC 项目搭建 -6- spring security 使用自定义Filter实现验证扩展资源验证,使用数据库进行配置

    Spring MVC 项目搭建 -6- spring security使用自定义Filter实现验证扩展url验证,使用数据库进行配置 实现的主要流程 1.创建一个Filter 继承 Abstract ...

  10. Python3组合数据类型(元组、列表、集合、字典)语法

    一.序列类型(字符串,元组(),列表[]) 序列类型支持in,len(),分片[],迭代,5种内置序列类型:bytearray,bytes,list,str,tuple(元组). 1.元组可以嵌套(如 ...