标题DIV外的标题文本

Question

你知道为什么文本“左边的文字”和“右边的文字”，应该在我的标题蓝色DIV中吗？看起来有一些意想不到的填充或文本顶部的东西。 JS Fiddle here

CSS：

#header {
    width: 100%;
    height: 18px;
    background: #0064C5;
}
#header p.left {
    float:left;
    color:#000;
}

#header p.right {
    float:right;
    color:#000;
}

Answer 1

试试这个

添加保证金：0到#header p

#header {
    width: 100%;
    height: 18px;
    background: #0064C5;
    clear: both;
}
#header p { margin:0;}
#header p.left {
    float:left;
    color:#000;

}

#header p.right {
    float:right;
    color:#000;

}

Answer 2

因为标题有固定的高度。

#header {
width: 100%;
overflow:hidden;
background: #0064C5;}

删除高度，添加溢出（因为header.p有浮动）;

Answer 3

<p>上的默认保证金只需将margin: 0;添加到#header p.left

jsFiddle

Answer 4

只需移除float:left; t中的#header p.lef

即可

试试此代码

#header p.left {
    color:#000;
}

而不是

#header p.left {
    float:left;
    color:#000;
}

请参阅此设计：http://jsfiddle.net/Grek/bZsck/