css容限冲突 [英] css margin collision

问题描述

有没有办法检测边距碰撞并防止它？像我有

Is there a way to detect margin-collision and prevent it? like if I have

<div style="margin-bottom: 10px;"></div>
<div style="margin-top: 10px;"></div>

它们之间有20像素的空间，但我需要10px？

I get 20px space between them, but I need 10px instead?

推荐答案

你不需要做任何事情;按框模型规格，相邻的底部和顶部边距将折叠 ，所以你在两个< div> 元素之间获得10像素的间隙，而不是20像素的间隙。请参见此jsFiddle预览。

You do not need to do anything; by the box model specs, adjacent bottom and top margins will collapse, so you get a 10-pixel gap between your two <div> elements as opposed to a 20-pixel gap. See this jsFiddle preview.

EDIT：您在< table> 广告a < div> 是因为默认情况下将表设置为 display：table ，这与块级元素不完全相同，所以根据规范，不崩溃。

the reason why you're not seeing a collapse between a <table> ad a <div> is because a table is set to display: table by default, which is not exactly the same as a block-level element, so by the specs the margins will not collapse.

这篇关于css容限冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！