内部的利润影响包含div的利润 [英] Inner div's margin affecting containing div's margin

问题描述

我有一个包含div的内部div。

I have an inner div inside a containing div.

<div id="container">
  <div id="inner"></div>
</div>

CSS

CSS

#container {
    width: 100px;
    height: 100px;
    background-color: red;
}
#inner {
    margin: 30px;
    width: 40px;
    height: 40px;
    background-color: black;
}

Fiddle

http://jsfiddle.net/8xUTJ/4/

我期望这将使一个小黑色的盒子垂直和水平在一个更大的红色盒子。

I expect this to make a small black box centered vertically and horizontally in a bigger red box. Instead I get a black box stuck to the top of the red box, and the red box has the margin-top.

有人可以解释CSS认为它在这里做什么？

Can someone explain what CSS thinks it is doing here?

推荐答案

添加 overflow：auto > #container div。

Add overflow:auto to the #container div.

jsFiddle example

jsFiddle example

或

向 #container div。

您可以在 W3C 。

这篇关于内部的利润影响包含div的利润的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！