一 、兄弟元素margin外边距合并演示

  当两个垂直方向相邻的兄弟元素都为常规流块盒,他们之间垂直方向的外边距不是两者之和,而是取两者中的最大值。这种现象被称为相邻的兄弟元素垂直方向外边距合并。

代码演示 :

效果演示 :

二 、父子级元素margin外边距合并演示及解决方法

  对于两个嵌套的父子级元素,如果父元素没有设置上外边距(或者小于子元素的上外边距),而子元素有上外边距,就会发生父元素与子元素的上外边距合并,合并后的外边距为两者中较大值。

代码演示:

注 意:父元素article并未设置上外边距 。

效果演示:

此时我们可以看到,由于子元素设置的上外边距,子元素已经将父元素一起拖着往下走。并不是我们所想的,子元素的上外边距离父元素的上外边距50px。

解决父子级元素外边距合并的方法:

  方法一、给父元素创建BFC  父元素的属性为overflow:hidden;  (推荐使用)

代码演示:

效果演示:

方法二、设置父元素的border属性  如:border-top: 1px solid transparent;

代码演示:

效果演示:

此方法虽然可以解决父子级外边距合并,却会造成一点点影响,会使父级的高度增加1像素,从而影响页面效果。 所以推荐使用方法一 。

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

  1. 为什么margin-top不是作用于父元素【margin外边距合并问题】

    coding时发现margin-top居然没作用于本元素上,而是作用到了父元素上. 原来是margin外边距合并导致的.以下是网上搬运来的知识: margin外边距合并详解:外边距合并现象在网页布局中 ...

  2. CSS Margin外边距合并

    应该知道这点东西的!!! 可是偏偏记不住! 外边距合并会发生在以下两种情况下: 1 垂直出现的两个拥有外边距的块级元素. div1 { margin-bottom: 20px; } div2 { ma ...

  3. margin 外边距合并问题

    一.兄弟元素的外边距合并 效果图如下:(二者之间的间距为100px,不是150px) 二.嵌套元素的外边距合并 对于两个嵌套关系的元素,如果父元素中没有内容或者内容在子元素的后面并且没有上内边距及边框 ...

  4. margin外边距合并问题以及解决方式

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

  5. 转载:margin外边距合并问题以及解决方式

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

  6. 关于collapsed margin(外边距合并)

    这是前面写postion定位时写到最后面的例子的时候发现的一个问题,于是专门写一篇随笔来解释记录一下,毕竟两个知识点同时写在一篇文章里面有点混乱的感觉.. 上篇随笔position定位遇到的问题在这里 ...

  7. “margin塌陷” 嵌套盒子外边距合并现象

    来源于官方文档对于外边距合并的解释: 注释:只有普通文档流中块框的垂直外边距才会发生外边距合并.行内框.浮动框或绝对定位之间的外边距不会合并. 出现外边距塌陷的三种情况: 1.相邻兄弟元素之间 若两者 ...

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

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

  9. margin显示怪异,外边距合并问题

    很多时候我们使用两个div,内层的div设置文字,需要垂直居中与上层div,但是怎么设置样式都不行,vertical-align:middle也不行. 代码: <div style=" ...

随机推荐

  1. vnc server,vnc server去哪下载,下载后如何连接使用(vnc viewer)

    vnc server是vnc服务端,通过需要下载的服务器连接之后在服务器端下载. 1.使用到的工具:iis7服务器管理 2.首先去服务器端下载vnc 3.根据要求安装结束,得到登录密码. 4.用IIS ...

  2. Cypress系列(5)- 自定义 Cypress

    如果想从头学起Cypress,可以看下面的系列文章哦 https://www.cnblogs.com/poloyy/category/1768839.html 前言 Cypress 不仅支持用户自定义 ...

  3. 曹工说Spring Boot源码(29)-- Spring 解决循环依赖为什么使用三级缓存,而不是二级缓存

    写在前面的话 相关背景及资源: 曹工说Spring Boot源码(1)-- Bean Definition到底是什么,附spring思维导图分享 曹工说Spring Boot源码(2)-- Bean ...

  4. 【Linux】yum库的配置

    链接–>CentOS7之yum仓库配置

  5. Spring Boot笔记(一) springboot 集成 swagger-ui

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 1.添加依赖 <!--SpringBoot整合Swagger-ui--> <depen ...

  6. CPU efficiency测量标准:DMIPS

    DMIPS:Dhrystone Million Instructions executed Per Second ,主要用于测整数计算能力.   1.Dhrystone:是测量处理器运算能力的最常见基 ...

  7. Java实现 LeetCode 515 在每个树行中找最大值

    515. 在每个树行中找最大值 您需要在二叉树的每一行中找到最大的值. 示例: 输入: 1 / \ 3 2 / \ \ 5 3 9 输出: [1, 3, 9] /** * Definition for ...

  8. Java实现 LeetCode 476 数字的补数

    476. 数字的补数 给定一个正整数,输出它的补数.补数是对该数的二进制表示取反. 示例 1: 输入: 5 输出: 2 解释: 5 的二进制表示为 101(没有前导零位),其补数为 010.所以你需要 ...

  9. Java实现 蓝桥杯VIP 基础练习 Sine之舞

    问题描述 最近FJ为他的奶牛们开设了数学分析课,FJ知道若要学好这门课,必须有一个好的三角函数基本功.所以他准备和奶牛们做一个"Sine之舞"的游戏,寓教于乐,提高奶牛们的计算能力 ...

  10. java中ReentrantLock类的详细介绍(详解)

    博主如果看到请联系小白,小白记不清地址了 简介 ReentrantLock是一个可重入且独占式的锁,它具有与使用synchronized监视器锁相同的基本行为和语义,但与synchronized关键字 ...