html - 强制div垂直相互接触

Question

我想要一个类似 this 的页面.

在尝试了一些 CSS 和 HTML 代码之后:CSS 代码:

html,body{
    margin:0px;
    background-color:#CCC;
}
#header{
    background-color:#FFF;
    height:350px;
    width:750px;
    display:block;
    }
#menu{
    background-color:#096;
    height:60px;
    width:100%;
    display:block;
}
#content{
    background-color:#03F;
    width:750px;
    height:400px;
    }
#footer{
    background-color:#900;
    height:120px;
    width:750px;
    display:block;
    bottom:0px;
    position:relative;
    }

HTML 代码:

<center>
    <div id="header">

    </div>
    <div id="menu">

    </div>
    <div id="content">

    </div>
    <div id="footer">

    </div>
</center>

它是同一件事，但在将一些文本放入“内容”部分后，div 分开了。像这样This .

我的 CSS 代码有什么问题？

Answer 1

这是因为p标签有一些默认的margin。

像这样添加CSS

p{
margin:0px;
}

Fiddle