子母保证金向母公司增加保证金 [英] Child margin adding margin to parent

问题描述

如果我有以下代码如何：
HTML：

how if i have the following code : HTML :

<section class="home">
</section>
<section class="main">
    <h1>Hello</h1>

</section>

CSS代码：

html,body{
    height: 100%;
    width: 100%;
}
.home{
    background: #000;
    height: 100%;
}
.main{
    height: 100%;
    background: pink;
}

为什么白色空间或者两者之间的边距？问题似乎是h1标签。如果我这样做：

Why the white space or rather margin between the 2 sections ?? the problem seems to be the h1 tag . if i do :

h1{
    margin: 0;
}

Bham！问题解决了。

Bham ! problem solved .

我有两个问题。

应用的浏览器，我ca纠正这个与重置没有问题。但是这仍然是一个问题。

1st the minor problem , now this style might be applied by the browser , i ca correct this with a reset no issues . but this is still a problem nevertheless .

我的第二个问题，和大的问题，现在假设浏览器，甚至我明确指定h1的margin-top可以说20-30px的保证金应该从侧面。主要部分为什么保证金适用于h1哪里是内部的。作为一个损失在.main和.home之间？
这个独特问题的原因是什么？

My 2nd problem , AND THE big problem , now suppose the browser or even i explicitly specify that the margin-top of the h1 should be say 20-30px the margin should be from side the .main section WHY IS THE MARGIN APPLIED TO h1 WHICH IS INSIDE .main ACTING AS A MARGIN BETWEEN .main and .home ? What is the cause of this unique problem ??

我已经阅读过关于保证金折旧的信息：

I have read about margin-collapsing:

Mozilla

css技巧

但这似乎更像是儿童加入 - 添加到对方。

问题的Jsfiddle

谢谢。

亚历山大。

推荐答案

http://jsfiddle.net/naeemshaikh27/qbaucv3j/1/

  .main{
        overflow: hidden; 
        height: 100%;
        background: pink;
    }

这是正常的行为（至少在浏览器实现之间）。 Margin不影响孩子相对于父母的位置，除非父母有填充，在这种情况下，大多数浏览器会将孩子的边缘添加到父母的填充。

This is normal behaviour (among browser implementations at least). Margin does not affect the child's position in relation to its parent, unless the parent has padding, in which case most browsers will then add the child's margin to the parent's padding.

源 http://stackoverflow.com/a/1939980/3556874

这篇关于子母保证金向母公司增加保证金的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！