具有保证金顶部的商品在包含框外有保证金 [英] Item with margin-top has margin outside of containing box

问题描述

我有这样的效果：

  #div {
 background：green; 
 width：200px; 
 height：100px; 
} 
 
 h1 {
 margin-top：100px; 
 
 $ / code> 

（显然有一些HTML可以用它。）

现在，当在浏览器中查看时， h1 显示在 #div 和 100px 保证金位于 #div 之上。

任何人都可以提出一个理由吗？

（代码有点太复杂，无法插入相关部分，所以如果没有人可以给我一个答案然后我会发布它，也许有人会发现一个错误或其他东西。）

解决方案

尝试添加填充。我以前见过这种问题。如果填充做同样的事情，然后尝试放置一个容器div但#div和h1然后添加边距。如果你只是想把h1从#div上移下来，那么填充是你最好的选择，因为它会将h1进一步推入#div'盒子'。

I have something to this effect:

#div {
   background: green; 
   width: 200px;
   height: 100px;
}

h1 {
   margin-top: 100px;
}

(And obviously there is some HTML to go with it.)

Now when viewed in the browser the h1 shows at the very top of the #div and the 100px margin goes on top of the #div.

Can anyone suggest a reason?

(The code is a little too complicated to insert the relevant parts so if no-one can give me an answer then I will post it and maybe someone will spot an error or something.)

解决方案

Try to add padding instead. I've seen this kind of problem before. If the padding does the the same thing then try putting a container div around but #div and the h1 then add the margin. If you are just wanting to move the h1 down from the #div then padding is your best bet since it will "Push the h1 further into the #div 'box'".

这篇关于具有保证金顶部的商品在包含框外有保证金的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！