微信扫一扫6.0w+
社区成员
关于css中margin折叠的问题
今天本来打算写一篇关于css中margin折叠的博客。
但是翻阅网上文章之后。众说纷纭，让我也不敢断言这究竟是怎样的机制。
这里暂时提出以下几个问题：
1.margin折叠会在何时出现？
2.margin折叠的原理是什么？
3.margin折叠与BFC的关系。
4.如何避免margin折叠？
但是翻阅网上文章之后。众说纷纭，让我也不敢断言这究竟是怎样的机制。
这里暂时提出以下几个问题：
1.margin折叠会在何时出现？
2.margin折叠的原理是什么？
3.margin折叠与BFC的关系。
4.如何避免margin折叠？
...全文
当前发帖距今超过3年，不再开放新的回复
发表回复
天际的海浪 2017-11-24
避免margin折叠
https://www.zhihu.com/question/19823139
- 打赏
- 举报
天际的海浪 2017-11-24
margin折叠又叫：CSS垂直外边距合并
当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
w3c的解释：
http://www.w3school.com.cn/css/css_margin_collapsing.asp
- 打赏
- 举报
详解css外边距折叠（margin collapsing） 外边距折叠指的是毗邻的两个或多个外边距 (margin) 会合并成一个外边距，本文详细的介绍了一下css外边距折叠的实现，分为3种情况，非常具有实用价值，需要的朋友可以参考下
CSS中margin折叠问题记录 为了了解margin折叠问题，首先需要知道一个概念：块级格式上下文Block Formatting Context（简称BFC ），这是Web页面的一种布局方式，通俗点说，也是指页面上一个渲染区域，里面的元素按文档流中的顺序垂直排列，...
详解CSS外边距折叠引发的问题 margin之间直接接触，没有阻隔 折叠后外边距的计算： 1.如果两个外边距都是正值，折叠后的外边距取较大的一个 2.如果两个外边距一正一负，折叠后的边距为边距之和 3.如果两个外边距都为负数，折叠后边距为较小的边距...
margin击穿问题(margin折叠问题) 问题如下 一段很简单的代码： css如下： <style type="text/css"> *{ margin: 0px; padding: 0px; } .show{ margin: 0px auto; width: 200px; heig...
css盒模型margin折叠问题解决方案总结 对于margin折叠问题，有以下常遇到的问题与解决方法。 在常规文档流中，2个或以上的块级盒模型相邻的垂直margin会被折叠。最终的margin值计算方法如下： 全部都为正值，取最大者； 不全是正值，则都取...
html中margin-top整体下移问题,cssmargin-top使用中经常遇到的问题总结 在css样式中，margin-top 属性设置元素的上外边距。它可以允许使用负值。默认定义固定的上外边距的值是 0。所有主流浏览器都支持 margin-top 属性。通过本文我们来具体的说一说在前端页面中使用margin-top 属性经常...
在css中关于box和margin,何时在CSS中使用margin和padding 在编写CSS时，在决定何时使用margin和何时使用padding时，是否应使用特定的规则或准则？使用padding是标签，当你想增加的可聚焦的区域。页边距位于块元素的外部，而填充位于内部。使用页边距将块与外部对象分隔开...
css margin属性 auto,css中margin:auto属性的使用方法 css中margin:auto属性的使用方法发布时间：2020-06-25 10:53:17来源：亿速云阅读：221作者：Leah今天就跟大家聊聊有关css中margin:auto属性的使用方法，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了...
纯CSS实现可折叠树状菜单 1：Html代码 下级 <input id=subsubfolder1 type=checkbox /> <li class=file><a>下级</a></li> 下级 <input id=subsubfolder2 type=checkbox /> <li class=file><a>无限级</a></li> ...li cl
CSS中 margin 重叠问题的理解 产生折叠的必备条件：margin 必须是邻接的!而根据 w3c 规范，两个 margin 是邻接的必须满足以下条件： •必须是处于常规文档流（非 float 和绝对定位）的块级盒子，并且处于同一个 BFC 当中。 •没有线盒，没有...
CSS--Margin折叠的两种情况 本文简单总结一下css布局中常见的两种margin折叠情况，以及解决方法。 兄弟元素之间发生折叠： .box1, .box2{ width: 200px; hieght: 200px; margin: 20px; } <div class="box1">hello</div> <...
css margin padding 0,CSS中margin和padding属性的用法 本文向大家介绍一下CSS中margin和padding属性的用法，margin是指层的边框以外留的空白，padding是指层的边框到层的内容之间的空白。margin和padding属性margin和padding用来隔开元素，margin是隔开元素与外边，...
HTML5中margin属性应用,细说CSS中margin属性的使用 本文着重描述关于 margin，我们日常不太容易发现的“坑”。盒模型接触过 CSS 的人应该都知道 CSS 的盒模型：由内容边缘(Content edge)包围形成的是内容盒(Content Box)，类推还有内边距盒(Padding Box)、边框盒...
