html – 内部div的margin影响包含div的margin

概述我有一个内部的div里面包含div. HTML <div id="container"> <div id="inner"></div></div> CSS #container { width: 100px; height: 100px; background-color: red;}#inner { margin: 30px; width: 40 我有一个内部的div里面包含div.

HTML

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

CSS

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

小提琴

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

我希望这样做可以使一个黑色的小盒子在一个较大的红色框中垂直和水平地居中.相反,我得到一个黑色的盒子粘在红色框的顶部,红色的框有边缘顶部.

有人可以解释CSS在这里做什么呢？

解决方法 添加overflow：auto到#container div.

jsFiddle example

要么

添加一个边框到#container div.

您可以在W3C阅读更多关于这种崩溃边际行为的信息.

总结

以上是内存溢出为你收集整理的html – 内部div的margin影响包含div的margin全部内容，希望文章能够帮你解决html – 内部div的margin影响包含div的margin所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。