CSS边缘推动身体元素

我为div元素设置了一个边距，但body元素也获得了这个边距。CSS边缘推动身体元素

考虑以下代码：

<!-- HTML --> 
<body> 
    <div> 
    </div> 
</body> 

<!-- CSS --> 
<style> 
    html,body { 
    height:100%; 
    margin:0; 
    padding:0; 
    outline:1px solid blue; 
    } 

div { 
    margin:20px; 
    outline:1px solid red; 
} 

</style>

这是结果和问题：

到目前为止，我已经加入了border:1px solid transparent;属性body元素解决了这个问题。这会破坏100％的高度，因为由于1px边框会出现滚动条。为什么会发生？

可能的解决方案（感谢您的帮助）：添加padding-top:1px和margin-top:-1px，这样一来100％的高度不得到与滚动条和您的保证金，避免崩溃毁了。

来源

2011-10-12 Rich

您正在使用哪种DOCTYPE？ – PseudoNinja

<！doctype html> – Rich

最好的解决方案可能是像在@Chris Nicholson提供的链接中指出的那样，在父级上添加'overflow：auto;' – jamietelin

这听起来类似于我遇到的问题：Margins and negative margins。我通过填充顶部而不是边框来解决我的问题，也许这与您的设计稍微更好一些？否则，请尝试以下链接：http://www.seifi.org/css/understanding-taming-collapsing-margins-in-css.html

来源

2011-10-12 15:43:56 Chris

这是由称为折叠边距的效应引起的。

某些相邻边距合并形成一个边距。这些边际被认为是“崩溃”。如果没有非空的内容，填充或边界区域或空格来分隔它们，边距就是相邻的。

http://www.w3.org/TR/css3-box/#collapsing-margins

来源

2011-10-12 15:45:29 Jrod

CSS边缘推动身体元素

回答

相关问题