css - 如何定位 div 使得 <p> 标签不会破坏位置？

Question

我在调整我的 div 位置时遇到了这个问题。我已经分离了许多 div，因此它们代表页眉、菜单 Pane 、右 Pane 、左 Pane 和页脚。请查看jsfiddle中的代码: http://jsfiddle.net/Kj5pe/

代码是，html:

<div id="main">
        <div id="header">
        </div>
        <div id="menu">
            <a href="#" class="buttons">Aaaa</a>
            <a href="#" class="buttons">Eeee</a>
            <a href="#" class="buttons">Iiii</a>
            <a href="#" class="buttons">Oooo</a>
            <a href="#" class="buttons">Uuuu</a>
        </div>
        <div id="leftpane">
            <p>Hello</p>
        </div>
        <div id="rightpane">
            <p>Hello</p>
        </div>
        <div id="midpane">
            <p>Hello</p>
        </div>
        <div id="footer">
            <p>Copyright &copy;</p>
        </div>
</div>

和CSS:

#main
{
    width: 65em;
    height: 35em;
    margin: auto;
}

#header
{
    background-color: #ffb400;
    height: 5em;
}

#menu
{
    background-color: #ffe63e;
    height: 3em;
}

.buttons
{
    text-decoration: none;
    border: 1px #ffb400;
    color: #001e59;
    line-height: 3em;
    float: left;
    padding-left: 15px;
    padding-right: 15px;
    display: block;
    font-family: consolas ,Segoe UI, courier new;
}

.buttons:hover
{
    background-color: #ffb400;
}

#leftpane
{
    height:25em;
    width: 15em;
    float: left;
    background-color: #b8c3d9;
    text-align: center;
    color: white;
    text-shadow: -1px 1px #000000;
}

#rightpane
{
    height:25em;
    width: 15em;
    float: right;
    background-color: #b8c3d9;
    text-align: center;
    color: white;
    text-shadow: -1px 1px #000000;
}

#midpane
{
    background-color: #a1abbf;
    height: 25em;
    width: 35em;
    margin: auto;
    text-align: center;
    color: white;
    text-shadow: -1px 1px #000000;
}

#footer
{
    height: 1.8em;
    background-color: #ffb400;
    margin-top: -1em;
    text-align: center;
    line-height: 1.8em;
    color: #ffffff;
    text-shadow: -1px 1px #000000;
}

请注意页脚有 margin-top: -1em... 我必须这样做。否则页脚和其余 div 之间会有间隙。为什么会这样？它不会发生在其他 div 上，但为什么只有页脚？

另外，请注意中间 Pane 与标题之间也有间隙。这是因为我在中间 Pane div 中使用了

标签。如果我删除它们，一切都会恢复正常。但我为什么要诉诸于此？为什么会这样？我在左 Pane 和右 Pane 中做同样的事情，但这并没有发生。为什么中间 Pane 是唯一行为不同的 Pane ？

Answer 1

您需要重置 p 标签以使其没有边距/填充

p
{
    margin:0;padding:0;
}

FIDDLE