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

前端之家收集整理的这篇文章主要介绍了html – 内部div的margin影响包含div的margin前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个内部的div里面包含div.

HTML

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

CSS

@H_403_4@#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相关文章