css屏幕边缘,CSS边缘恐怖;边距在父元素之外添加空格

8 个答案:

答案 0 :(得分：172)

将overflow:auto添加到您的#page div。

答案 1 :(得分：33)

添加以下任一规则：

float: left/right;

position: absolute;

display: inline-block;

overflow: auto/scroll/hidden;

clear: left/right/both;

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

根据文章：

W3C规范定义了折叠边距如下：

“在本规范中，表达式折叠边距意味着两个或多个框(可能彼此相邻或嵌套)的相邻边距(没有非空内容，填充或边框区域或间隙将它们分开)结合形成一个边缘。“

对于父子元素也是如此。

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

在其他情况下，元素的边距不会崩溃：

浮动元素

绝对定位元素

内联块元素

将溢出设置为除可见之外的其他元素(它们不会与子项一起折叠边距。)

已清除的元素(它们不会使用其父块的下边距折叠其上边距。)

根元素

答案 2 :(得分：13)

问题是父母没有考虑儿童身高。添加display:inline-block;为我做了。

完整CSS

#page {

margin:0;

background:#FF9;

display:inline-block;

width:100%;

}

答案 3 :(得分：1)

添加以下规则：

overflow: hidden;

这是由于页边距缩小造成的。请参阅有关此行为here的文章。

根据文章：

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

答案 4 :(得分：0)

我为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);}

答案 5 :(得分：0)

#page {

overflow: hidden;

margin:0;

background:#FF9;

}

答案 6 :(得分：0)

只需将border-top: 1px solid transparent;添加到您的#page元素中即可。

答案 7 :(得分：-1)

其他答案中的解决方案对我不起作用。透明边框，内联块等均引起其他问题。相反，我在祖先元素中添加了以下css：

parent::after{

content: "";

display: inline-block;

clear: both;

}

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