为什么会自动的有个空白

Question

第一个p标签前边老是会有一块空白，而不是靠左的。

部分代码：<div class="heilan"> <div class="pic">PIC</div> <div class="blogname"> <p>Blogger Name</p> <h2>Blog Site Name</h2> </div> </div> <div class="blog"> <p><a href="">This will be The Blog Entry Title</a></p> <p>A short summary of the blog entry above.</p> </div>

                部分CSS:`#top-l .heilan{
margin-top:10px;
height:80px;
width:420px;
background: url(../images/pic-tit.png) no-repeat;

}

.pic,.blogname{
float: left;
color: #fff;
height:70px;
line-height: 0;
font-size: 20px;
}

.pic{
line-height: 24px;
margin:22px;
}

.blogname{
margin-left: 20px;
}

.blog{
width:420px;
}`

Answer 1

没有清除浮动；
需要clear:both;

Answer 2

p标签有默认缩进的

Answer 3

内边距问题吗→_→

Answer 4

在Chrome调试中，蓝色部分是content大小，红色部分是margin大小。

可以看到<p>标签的内容确实是占领了整行的。所以设置<p>的行内对齐就好了：

cssp{
  text-align: left;
}

更多元素对齐的讨论可以参考：CSS Alignment：元素对齐问题

Answer 5

.heilan {overflow:hidden;}