CSS margin 错误; Margin 在父元素外增加空间

我的css边距并没有按照我想要或期望的方式表现。似乎我的标题边距-顶部影响周围的div标签。

这就是我想要和期待的: What I want.... < / p >

< >强…但这是我最后得到的结果: What I get… < / p >

来源:





Margin test

在这个例子中，我夸大了边缘。h1-tag上的默认浏览器边距略小，在我的例子中，我使用Twitter引导，使用Normalizer.css将默认边距设置为10px。不是那么重要，重点是;我不能，也不应该，想要的不改变h1-标签的边距。

我想这和我的另一个问题类似;为什么这个CSS margin-top样式不工作?< / >。问题是如何解决这个问题?

我读过类似问题的几个线程，但没有找到任何真正的答案和解决方案。我知道添加padding:1px;或border:1px;可以解决这个问题。但这只会增加新的问题，因为我不想在我的潜水标签上有填充或边框。

一定有更好的最佳实践解决方案?这一定很常见。

113796 次浏览
小开
最佳答案

将overflow:auto添加到#page div中。

jsFiddle的例子 .

并检查崩溃的边缘，当你在它。

小开

问题是家长没有考虑到孩子的身高。添加display:inline-block;对我来说就是这样。

完整的CSS

#page {
margin:0;
background:#FF9;
display:inline-block;
width:100%;
}

见Fiddle

小开

添加以下任意一条规则:

float: left/right;
position: absolute;
display: inline-block;
overflow: auto/scroll/hidden;
clear: left/right/both;

这是由collapsing margins引起的。请参阅有关此行为的文章在这里。

文章称:

W3C规范如下定义折叠边距:

在此规范中，表达式边距折叠表示两个或多个方框(可能是相邻的或嵌套的)的相邻边距(没有非空内容、填充或边界区域或间隙将它们分开)结合起来形成单个边距。

对于父子元素也是如此。

所有的答案都包含一个可能的解决方案:

在其他情况下，元素的边缘没有崩溃:

  • 被浮动元素
  • 绝对定位元素
  • inline-block元素
  • 元素的overflow被设置为任何非可见的内容(它们不会折叠子边距)。
  • 清除元素(它们不会将上边距与其父块的下边距合并)。
  • 根元素
小开

只要将border-top: 1px solid transparent;添加到你的#page元素中。

From w3.org

两条边距相邻当且仅当:
-没有行框，没有间隙，没有填充，没有边界将它们分开

小开

其他答案中的解对我不起作用。透明边框、内联块等等，都导致了其他问题。相反，我在我的祖先元素中添加了以下css:

parent::after{
content: "";
display: inline-block;
clear: both;
}

根据您的情况，这可能会导致自己的问题，因为它在最后一个子元素之后增加了额外的空间。

小开

增加如下规则:

overflow: hidden;

这是利润率崩溃造成的。请参阅有关此行为的文章在这里。

文章称:

如果父元素没有任何顶部边距或顶部边距小于它的第一个子元素，则元素的呈现方式将使父元素看起来具有子元素的边距。所以这可能发生在满足这些条件的页面上的任何地方，但它往往在页面顶部最明显。

小开
当我为XenForo 2.1制作样式时，我的方法，但它应该对你有用: (请将这些LESS变量替换为实际值。同时，小边距的绝对值应与前后伪元素的高度相同)

// The following two lines are to avoid top & bottom fieldset borders run out of the block body.
// (Do not tweak the CSS overflow settings, otherwise the editor menu won't be float above the block border.)
&:before {content: "\a0"; display: block; width: auto; margin-bottom: floor(-1 * @xf-lineHeightDefault * @xf-fontSizeSmall - @xf-borderSizeMinorFeature);}
&:after {content: "\a0"; display: block; width: auto; margin-top: floor(-1 * @xf-lineHeightDefault * @xf-fontSizeSmall - @xf-borderSizeMinorFeature);}

提交答案