Html 为什么不'；我的其他块元素不是完美地围绕着我的浮动框吗？

我有一个css初学者（或者可能缺乏思考）的问题，那就是，我的段落顶部没有与浮动框完美对齐，这是为什么

HTML:

---

这是小提琴：。

p元素有一个边距。用以下方法清除它：

p{margin:0}

---

有一个边距使p不对齐，将边距放在顶部：0；使用element inspector（Chrome）或firebug，这是当你看到陌生事物时能找到的最好的工具

html
{
    background-color: #555;
}

body
{
    width: 960px;

    margin: 60px auto;
    padding: 20px;

    background-color: white;
}



.left
{
float: left;
}

.right
{
float: right;
}

.box
{
padding: 15px;
}

.blue_box
{
width:  300px;

margin: 0 0 15px 15px;

background: #E0E0F8;
}

.grey_box
{
width: 460px;

margin: 0 20px 20px 0;

background-color: darkgrey;
}

.pink_box
{
width: 135px;

margin: 0 15px 15px 0;

background-color: lightpink;
}

p{margin:0}