简单的HTML / CSS框模型混淆 [英] Simple HTML / CSS box model confusion

问题描述

使用这个非常简单的html / css（ http://jsfiddle.net/XXzTj/ ） p>

 < div style =background-color：red;> 
< div style =margin：12px; background：blue;> hello< / div> 
< / div> 
  

页边距全部正确12px，但我期望父元素的红色背景显示在顶部和底部的12px空间中，而不是它的空白空间。

我会生气还是我做错了什么？

解决方案

试试这个 -

$ c>< div style =background-color：red; height：auto; overflow：hidden;>
< div style =margin：12px; background：blue;> hello< / div>
< / div>

http://jsfiddle.net/XXzTj/1/

Using this really simple html / css (http://jsfiddle.net/XXzTj/)

<div style="background-color:red;">
<div style="margin:12px; background:blue;">hello</div>
</div>

The margin is spaced 12px all round correctly, but I was expecting the red background of the parent element to be shown in the top and bottom 12px spaces, instead its just 'blank space'.

Am I going mad or have I done something wrong?

解决方案

try this --

<div style="background-color:red;height:auto;overflow:hidden;">
<div style="margin:12px; background:blue;">hello</div>
</div>

http://jsfiddle.net/XXzTj/1/

这篇关于简单的HTML / CSS框模型混淆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！