强制div垂直相互接触

Question

我想有一个像网页这样.

尝试了一些像这样的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分开了.像这样.

我的CSS代码中的问题是什么？

Answer 1

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

像这样添加 CSS

p{
margin:0px;
}

小提琴