有没有办法完全禁用边距折叠?我发现的唯一解决方案(称为“不折叠”)需要使用1px边框或1px填充。我觉得这是不可接受的:多余的像素毫无理由地使计算复杂化。是否有更合理的方法来禁用边缘折叠?
当前回答
您还可以使用老式的micro clearfix。
#container::before, #container::after{
content: ' ';
display: table;
}
查看更新后的小提琴:http://jsfiddle.net/XB9wX/97/
其他回答
我有类似的问题,边际崩溃,因为父母有位置设置为相对。下面是可以用来禁用边距折叠的命令列表。
这里是测试场地
只需尝试将任何父-fix*类分配给div.container元素,或将任何类children-fix*分配给div.margin。选择一个最适合你需要的。
When
边距折叠被禁用,红色背景的div.absolute将被放置在页面的顶部。 div.absolute将与div.margin位于相同的Y坐标上
html, body { margin: 0; padding: 0; } .container { width: 100%; position: relative; } .absolute { position: absolute; top: 0; left: 50px; right: 50px; height: 100px; border: 5px solid #F00; background-color: rgba(255, 0, 0, 0.5); } .margin { width: 100%; height: 20px; background-color: #444; margin-top: 50px; color: #FFF; } /* Here are some examples on how to disable margin collapsing from within parent (.container) */ .parent-fix1 { padding-top: 1px; } .parent-fix2 { border: 1px solid rgba(0,0,0, 0);} .parent-fix3 { overflow: auto;} .parent-fix4 { float: left;} .parent-fix5 { display: inline-block; } .parent-fix6 { position: absolute; } .parent-fix7 { display: flex; } .parent-fix8 { -webkit-margin-collapse: separate; } .parent-fix9:before { content: ' '; display: table; } /* Here are some examples on how to disable margin collapsing from within children (.margin) */ .children-fix1 { float: left; } .children-fix2 { display: inline-block; } <div class="container parent-fix1"> <div class="margin children-fix">margin</div> <div class="absolute"></div> </div>
这里是jsFiddle的例子,你可以编辑
保证金暴跌主要有两种类型:
相邻元素之间的折叠边距 缩小父元素和子元素之间的边距
只有在后一种情况下,使用填充或边框才能防止崩溃。此外,任何溢出值与父对象的默认值(可见)不同,都将防止崩溃。因此,overflow: auto和overflow: hidden具有相同的效果。也许使用hidden的唯一不同之处在于,如果父对象具有固定的高度,则隐藏内容会导致意想不到的后果。
其他属性,一旦应用到父,可以帮助修复这种行为:
浮动:左/右 位置:绝对的 显示方式:inline-block / flex / grid
您可以在这里测试所有这些:http://jsfiddle.net/XB9wX/1/。
我应该补充一点,像往常一样,Internet Explorer是个例外。更具体地说,在IE 7中,当为父元素指定某种布局(比如宽度)时,边距不会折叠。
来源:Sitepoint的文章“崩溃边缘”
CSS* | Fixes |
---|---|
display: flow-root; |
✅ Parent element collapse ❌ Sibling element collapse |
display: flex; |
✅ Parent element collapse ✅ Sibling element collapse |
*现代浏览器(不包括IE11)支持display: flow-root和display: flex。
例子
section { background: green; outline: 2px solid purple; } p { background: yellow; margin: 1em 0; } section.flow-root { display: flow-root; } section.flex { display: flex; flex-direction: column; } <h2>Default</h2> <section> <p>Paragraph 1</p> <p>Paragraph 2</p> </section> <h2><code>flow-root</code> (Fixes only container)</h2> <section class="flow-root"> <p>Paragraph 1</p> <p>Paragraph 2</p> </section> <h2><code>flex</code> (Fixes both container & siblings)</h2> <section class="flex"> <p>Paragraph 1</p> <p>Paragraph 2</p> </section>
为了防止姐妹页边距崩溃,添加display: inline-block;给兄弟姐妹中的一个(一个就足够了,但你可以给两个都加)。
据我所知,禁用边距折叠的一个巧妙技巧是设置父边距为0.05px:
.parentClass {
padding: 0.05px;
}
填充不再是0,所以不会再发生折叠,但同时填充足够小,从视觉上看,它会四舍五入到0。
如果需要其他填充,则只在不需要边距收缩的“方向”上应用填充,例如padding-top: 0.05px;。
工作的例子: .noCollapse { 填充:0.05 px; } .parent { 背景颜色:红色; 宽度:150 px; } 定格{ margin-top: 50 px; background - color:石灰; 宽度:100 px; 身高:100 px; } < h3 >边境崩溃< / h3 > < div class = "父" > < div class = "孩子" > < / div > < / div > <h3>无边界崩溃</h3> <div class="parent noCollapse"> < div class = "孩子" > < / div > < / div >
编辑:将数值从0.1更改为0.05。正如Chris Morgan在下面的评论中提到的,从这个小测试来看,Firefox似乎确实考虑了0.1px的填充。不过,0.05px似乎可以解决这个问题。
推荐文章
- 如何使一个DIV不包装?
- 使用jQuery以像素为整数填充或边距值
- CSS div元素-如何显示水平滚动条只?
- 如何指定一个元素后包装在css flexbox?
- 使用“!”的含义是什么?重要的”?
- 用CSS截断长字符串:可行吗?
- 重要的样式
- 灰色的图像与CSS?
- CSS中*和*|*的区别是什么?
- 资源解释为样式表,但以MIME类型text/html传输(似乎与web服务器无关)
- CSS高度:100% vs高度:auto
- 带引导的固定宽度按钮
- 是类型="文本/css"必须在<链接>标签?
- 在没有jQuery的情况下,防止悬停父div的子元素时onmouseout
- 英语字母表中哪个字母占像素最多?