为什么P元素会出现多余的padding??

<div  id="sign">
    <p>系统初始化</p>
    <img  src="img/Shape-9.png"   id="xmark">                
</div>


    #sign{
    border-bottom:#c0ede1  solid  1px;
    height:55px;
    line-height:55px;
text-align:center;
}

#sign>p{/*为什么会有上下padding？？？？？？？？？？？？？？？？*/
    font:20px/20px  "microsoft yahei";
    color:rgb(69,222,199);
    margin-top:19px;
    padding:0px;
    display:inline;
}

问题是：为什么打开开发者工具，鼠标放在<p>元素上会显示其高度26px??我明明设置的字体20px，
行高20px,多余的6px哪里来？？而且这6px好像是均匀分布在文字上下。

问题2：我只给<p>元素设置margin-top:19px;可是开发者工具显示他的margin-bottom为20px,不清楚他的这个20px哪里来的？？求大神指点

---

浏览器都是有默认样式滴，我们需要去除默认的margin和padding，最简单做法就是在css文件最顶部加上
*{margin:0;padding:0},但是这样做并不科学，仅仅实现咱们的需求而已，简单暴力；
你可以去下一个normalize.css重置你的样式，详见链接http://necolas.github.io/normalize.css/