html - 标题 DIV 外的标题文本

Question

你知道为什么文本“左边的文本”和“右边的文本”应该在我的标题蓝色 DIV 中吗？看起来文本顶部有一些意外的填充或其他内容。JS 小提琴在这里。

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

只需删除float:left;in #header p.left

试试这个代码

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

代替

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

看到这个设计：http: //jsfiddle.net/Grek/bZsck/

Answer 3

因为标题有固定的高度。

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

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

Answer 4

<p>它只是添加margin: 0;到的默认边距#header p.left

jsFiddle