文档章节

我对margin外边距合并的理解

会写代码的husky
 会写代码的husky
发布于 2016/09/21 14:30
字数 483
阅读 144
收藏 0

        在我初学css的时候,关于css盒模型的外边距合并问题,迷惑了我很久。在写demo的时候,我只是尽量避免两个div外边距合并,怕出现各种各样匪夷所思的bug。

       工作不久,经过几个项目的洗礼,这个以前让我迷惑的问题,终于有了深刻的理解。

        我对其总结如下:

        一、当一个div在另一个div里,两个div都有margin的属性,想让这两个div不出现外边距合并的问题,必须给外层div添加border属性或者overflow:hidden属性;如果允许其出现外边距合并,内层div始终保持原位置,而外层div的margin属性会取两者的最大值。

        例: 1.不允许出现外边距合并,给外层div添加overflow:hidden或border属性:外层盒子margin-top为100px,内层盒子为50px。

               

2.允许出现外边距合并:内层div始终保持原位置不变,外层div的margin去两者中最大值:

                           

 

二、当两个div不存在嵌套关系时,不管是否有border或者overflow属性时,两者始终会存在外边距合并问题。

例:1.第一个div有margin-bottom:100px,第二个为margin-top:50px, 两者间距最终取100px

        2.第一个div 由margin-bottom:100px, 第二个为margin-top:150px,两者间距最终取150px

                                

 

        总结:在实际项目中,如果对外边距合并理解不透彻而又不想因为css盒模型的外边距合并问题困扰,可以在不影响布局的问题下,可以添加overflow:hidden属性或者跟透明的border;如无法避免外边距合并问题,谨记两者margin取最大值就好了。

       此为作者拙见,欢迎广大读者批评和一起交流。

 

 

QQ:2941120149会写代码的Husky

邮箱:it.fan@foxmail.com

 

© 著作权归作者所有

会写代码的husky
粉丝 6
博文 23
码字总数 17052
作品 0
北京
程序员
私信 提问
深入理解BFC和Margin Collapse

深入理解BFC和Margin Collapse BFC的理解与应用 首先我们来看看w3c规范对BFC的解释,其实对于这种概念的学习上,我们总是建议首先寻找官方的定义,因为原则上来说官方的才是最权威和正确的,...

飛飛飛jjs
2017/06/06
0
0
深入理解BFC和Margin Collapse.

BFC的理解与应用 首先我们来看看w3c规范对BFC的解释,其实对于这种概念的学习上,我们总是建议首先寻找官方的定义,因为原则上来说官方的才是最权威和正确的,而且还比较详细,千万不要因为看...

邓含月
2014/02/27
52
0
详解css外边距折叠(margin collapsing)

外边距折叠指的是毗邻的两个或多个外边距 (margin) 会合并成一个外边距,本文详细的介绍了一下css外边距折叠的实现,分为3种情况,非常具有实用价值,需要的朋友可以参考下 前文 这是的一个经...

嫣然丫丫丫
2018/12/03
0
0
深入CSS基础之box model

阅读注意事项 本篇文章的依赖主要是CSS2.1 specification 8. box model 和 CSS Box Model Module Level 3。 本篇整体比较细节和理论,可能会看起来枯燥,我尽量讲的逻辑简单些。个人认为有时...

JunYu
02/20
0
0
从CSS盒子模型说起

前言 总括: 对于盒子模型,BFC,IFC和外边距合并等概念和问题的总结 原文地址:从CSS盒子模型说起 知乎专栏:前端进击者 博主博客地址:Damonare的个人博客 为学之道,莫先于穷理;穷理之要...

Damonare
2017/07/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

官方来源的 Duo Mobile App 解决了我的 Network Difficulties 问题

https://help.duo.com/s/article/2094?language=en_US 我利用百度搜索下载了一个 Duo Mobile App (由于 Google Play)在大陆不可用。 在扫描旧手机上的 Duo Mobile App 的二维码时, 显示出错...

圣洁之子
7分钟前
1
0
Zabbix监控Mysql容器(Docker容器)主从是否存活

1、在Zabbix Web端创建模板 2、为该模板创建监控项 3、创建触发器 4、在zabbix-agent端操作 在/etc/zabbix/zabbix_agentd.d新建customize.confw文件 内容如下 UserParameter=mysql.replicat...

abowu
8分钟前
1
0
基于 RocketMQ 的同城双活架构在美菜网的挑战与实践

本文整理自李样兵在北京站 RocketMQ meetup分享美菜网使用 RocketMQ 过程中的一些心得和经验,偏重于实践。 嘉宾李样兵,现就职于美菜网基础服务平台组,负责 MQ ,配置中心和任务调度等基础...

大涛学长
14分钟前
1
0
设计模式之:外观模式和桥接模式

作者:DevYK 链接:https://juejin.im/post/5d7e01f4f265da03b5747aac 外观模式 介绍 外观模式 (Facade) 在开发过程中的运用评率非常高,尤其是在现阶段,各种第三方 SDK “充斥” 在我们周边...

Java架构Monster
15分钟前
1
0
人证合一核验设备

人脸身份验证机,人证合一设备1:N如我们现在在车站或一些重要的场所如步行街、城中村等人流密集的场所应用的人脸识别布控系统,其特点是动态和非配合。所谓的动态也就是识别的不是照 片,不是...

非思丸智能
17分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部