包含在box中的文本在浏览器中显示顶部填充，但在fiddle中不显示

Question

从昨晚开始我就目睹了这种奇怪的行为。

小提琴在这里:http://jsfiddle.net/Gqndm/

，这是我在我的机器上所有主要浏览器中得到的截图:https://i.stack.imgur.com/Bl3ve.png

关于为什么文本在框中看起来是向下推的任何想法(例如不在框的最顶部，如在小提琴中)。

谢谢你的帮助

Answer 1

jsFiddle导入一个名为normalize.css的CSS文件，其中包含以下CSS…

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0;
    padding:0;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
fieldset,img { 
    border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-style:normal;
    font-weight:normal;
}
ol,ul {
    list-style:none;
}
caption,th {
    text-align:left;
}
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border:0;}

可以看到，p和div元素的margin和padding设置为0。

这有效地规范了所有浏览器的默认样式表。如果您在其他浏览器测试中包含了这个CSS，毫无疑问，您将看到与jsFiddle相同的内容。