Fatal编程技术网
  • html/
  • Html 恐怖主义；边距在父元素外添加空间

Html 恐怖主义；边距在父元素外添加空间

html css

Html 恐怖主义；边距在父元素外添加空间,html,css,overflow,margin,Html,Css,Overflow,Margin,我的css页边距没有按照我想要或期望的方式运行。我的页眉边距顶部似乎会影响它周围的div标记 这就是我想要和期待的： …但这就是我的结局： 来源： <!doctype html> <html> <head> <meta charset="utf-8"> <title>Margin test</title> <style type="text/css"> body { margin:0; } #pag

我的css页边距没有按照我想要或期望的方式运行。我的页眉边距顶部似乎会影响它周围的div标记

这就是我想要和期待的：

…但这就是我的结局：

来源：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Margin test</title>

<style type="text/css">
body {
    margin:0;
}
#page {
    margin:0;
    background:#FF9;
}
#page_container {
    margin:0 20px;
}
h1 {
    margin:50px 0 0 0;
}
</style>

</head>

<body>

<div id="page">
    <div id="page_container">
        <header id="branding" role="banner">
            <hgroup>
                <h1 id="site-title"><span><a href="#" title="Title" rel="home">Title</a></span></h1>
                <h2 id="site-description">Description</h2>
            </hgroup>
        </header>
    </div>
</div>


边际检验
身体{
保证金：0；
}
#页面{
保证金：0；
背景:#FF9；
}
#分页容器{
利润率：0.20px；
}
h1{
利润率：50px0；
}
描述
我在这个例子中夸大了边际。h1标签上的默认浏览器边距稍微小一些，在我的例子中，我使用Twitter引导，Normalizer.css将默认边距设置为10px。没那么重要，重点是；我不能，不应该，不想改变h1标签上的边距

我想这与我的另一个问题类似。问题是我如何解决这个具体问题

我读过类似的问题，但没有找到任何真正的答案和解决办法。我知道添加
填充：1px或
边框：1px解决了这个问题。但这只会增加新的问题，因为我不想在我的div标签上添加填充或边框


必须有一个更好的、最佳实践的解决方案？这一定很常见。
将
溢出：auto
添加到您的
#页面
div




当你在这里的时候，请检查一下。
问题在于家长没有考虑孩子的身高。添加
显示：内联块为我做的

完整CSS


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



添加以下任一规则：


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


这是由
折叠边距
引起的。请参阅有关此行为的文章

文章说,

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

在本规范中，“折叠边距”表示两个或多个框（可能相邻或嵌套）的相邻边距（没有非空内容、填充或边框区域，也没有间隙将它们分隔开）组合成一个边距

对于父子元素也是如此


// 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);}


所有答案包括一种可能的解决方案：

还有一些元素的边距没有折叠的情况：


    

  • 浮动元素
    • 

  • 绝对定位元素
    • 

  • 内联块元素
    • 

  • 溢出设置为“可见”以外的任何内容的元素（它们不会与其子元素一起折叠边距。）
    • 

  • 已清除图元（它们不会将其上边距与其父块的下边距折叠。）
    • 

  • 根元素
    • 



只需添加
边框顶部：1px实心透明到您的
#页面
元素



当且仅当：

-无线框、无间隙、无填充和无边框将它们分隔开


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


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



根据您的情况，这可能会导致自身的问题，因为它会在最后一个子元素后添加额外的空间。
添加以下规则：


overflow: hidden;


这是由边缘塌陷造成的。请参阅有关此行为的文章

文章说,

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


我在为XenForo 2.1制作样式时采用的方法，但它应该对您有用：
（请将这些较小的变量替换为实际值。此外，次要边距的绝对值应与前后伪元素的高度相同。）


你是从CSS重置开始的吗？我使用Normalizer.CSS。但这不是问题所在。如果我删除h1标签。没问题。问题是我想在我的h1标签上留一个空白，这会影响周围的元素。@DavidThomas如果你想小提琴，我现在正在玩一个演示。。j08691已经解决了：）解释和一些可能的解决方案已经包含在我对您之前问题的回答中…这很有效。在这里（）也找到了大量的示例，并提供了一些很好的解释。没有一个解决方案是真正100%令人满意的。但我想人们不得不接受它，边距必须以这种方式工作，否则文本格式将是不可能的。99%的时间可以根据需要工作。但在设计布局时，时不时会出现这样的问题：Poverflow：隐藏的；在我的剧本中对我也很有用，而且效果更好。你是个魔术师。这真是奇怪的行为收集边距看起来非常复杂，难以定义（许多规则，许多例外），它有什么用？
display:flex
with
flex direction:column
在父容器上做同样的把戏。
clear:
似乎不起作用，其他解决方案在Google ChromeIt上也起作用。而我喜欢
溢出：auto解决方案更好，我觉得这很酷。我认为引用w3会很有用，所以我把它添加到您的答案中。

// 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);}