是什么差距的原因的DIV

我有一个简单的HTML页面之间，如下所示：是什么差距的原因的DIV

<html> 
    <head> 
     <style> 
      BODY { margin:0px; padding:0px; background-color:#000000; color:#FFFFFF;} 
      /*H1 { margin:0px; }*/ 
      .t-head { padding:10px; background-color:#0000FF; } 
      .t-body { background-color:#FFFFFF; color:#000000; /*padding:10px;*/} 
      .t-footer { padding:10px; background-color:#0000FF; color:#FFFFFF;} 
     </style> 
    </head> 
    <body> 
     <div class="t-head">Header content</div> 
     <div class="t-body"> 
      <h1>Content Header</h1> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
      nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
      reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
      pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
      culpa qui officia deserunt mollit anim id est laborum. 
     </div> 
     <div class="t-footer">Footer content</div> 
    </body> 
</html>

页面的主体具有三个部分 - 报头DIV（叔报头），主体DIV（ t-body）和页脚DIV（t-footer）。为了便于讨论，我将BODY的背景设为黑色。如果您在浏览器中查看此页面，则标题DIV和正文DIV之间会存在间隙（即黑色水平条带）。这种行为在IE，Chrome和Firefox中是一致的。

我知道差距的罪魁祸首 - 这是H1标签的边缘。如果从页面的样式部分取消注释H1样式，则会看到差距消失。或者，您可以将H1样式留下评论，并取消t-body类中的填充样式，间隔将消失。我不明白的是为什么的 H1距使T字头DIV和T形体DIV之间的间隙。我对CSS的理解（显然是错误的）是H1边距应该从t-body DIV的顶部计算出来。我也不明白为什么为t-body DIV添加填充修复了这个问题。

任何人都可以解释为什么H1利润率似乎导致了T字头DIV和T形体DIV之间的差距的原因是什么？ ...另外，为什么向t-body DIV添加填充可以解决问题？

来源

2014-02-28 dnickels

一个的jsfiddle显示您的问题：http://jsfiddle.net/AvLTL/ – enguerranws

HerrSerker的答案是正确的，但是这已经被问到，并在SO上回答。 [阅读类似问题的答案]（http://stackoverflow.com/questions/996693/why-do-the-p-and-h1-elements-cause-gaps-in-my-layout） – CJdriver

原因正在崩溃边缘。

看一下这篇文章，特别章节“折叠亲子元素间边距”：http://reference.sitepoint.com/css/collapsingmargins，你可能会看到。

可以使用overflow用不同的值比visible，例如取消该折叠边缘overflow: hidden或overflow:auto。
http://jsfiddle.net/5w4gp/

.t-body { 
    overflow: auto; 
}

如果你不喜欢overflow技术，您可以添加

.t-body { 
    padding-top: 1px; 
    margin-top: -1px; 
}

到.t-body。
http://jsfiddle.net/68785/

还有利用float和clear第三个解决方案：http://jsfiddle.net/z2RNF/

.t-head { 
    float: left; 
    width: 100%; 
} 
.t-body { 
    clear: both; 
}

为什么要做这些工作？它们防止塌陷的垂直边缘彼此“接触”。

这里是规格：http://www.w3.org/TR/CSS2/box.html#collapsing-margins

来源

2014-02-28 14:39:53 HerrSerker

另请参阅： http://css-tricks.com/almanac/properties/m/margin/，特别是最后一个例子。 –

嗨，你能解释一下吗？在这种情况下，你的意思是t头和t-body是关节吗？但OP没有使用保证金，他使用填充。 – 2014-02-28 14:56:49

不，不是'.t-head'和'.t-body'是联合的。它是'.t-body'（这是零）和第一个'h1'在'.t-body'（这是浏览器默认）触摸的范围。如果他们这样做，他们会崩溃，并显示在“t。body”之上。折叠意味着它们没有自己的保证金，但共享一个保证金，这是两个保证金的最大值。 – HerrSerker

替代具有放置在一个div其填充延伸经过div的边缘将是所述元件重叠到其他分区，这将不由“分化”的两个div的元件。解释者宁愿在两个div之间创造空间而不是divs之间的重叠内容。

所以，你的H1有足够的填充，以延伸过你的身体div的边缘。这导致了差距。当你增加body div的填充时，它给它足够的空间让整个h1保持在里面。通过一次增加几个像素的填充来试验这一点。

（我会提供一个图形，但我我的手机上：[）

来源

2014-02-28 14:33:44

这只是块元素默认CSS盒模型，子元素崩溃的边缘。

如果要使用margin top来放置标题，则需要将.t-body元素设置为display: inline-block;属性。

正如你可以看到有：http://jsfiddle.net/AvLTL/1/

多规格的位置：http://www.w3.org/TR/CSS2/box.html#collapsing-margins

来源

2014-02-28 14:44:49 enguerranws

是什么差距的原因的DIV

回答

相关问题