ExtJS4 Panel's header is always smaller than the body

I am new to ExtJS4. I'm testing some simple demos in ExtJs4 Docs. I find that the header of Panel is always little smaller than body of panel, and the panel inside is samller too. The header is always 11px shorter than the body under the measure with Firebug. I test the code in FF, IE8, Chrome, all of them render it like what the screen shot shows (the image link). Sorry for my poor English. I'm confused with this probelm,help me,please.

the screen shot link:

https://i.sstatic.net/vb2Xo.jpg

or

http://www.tu265.com/di-c870adf0409aa61a99c774186dd9afa8.jpg

my js code:

Ext.create('Ext.panel.Panel', {
    title: 'container panel',
    renderTo: 'container',
    width: 400,
    height: 300,
    layout: 'accordion',
    items: [{
        tools: [{ type: 'gear', handler: function () {
            Ext.Msg.alert('msgWindow', 'btn is Clicked');
        }
        }, { type: 'refresh'}],
        title: 'panel1',
        xtype: "panel",
        html: "insidePanel1"

    }, {
        title: 'panel2',
        xtype: "panel",
        html: "insidePanel2"
    }, {
        id: 'panel3',
        title: 'panel3',
        xtype: "panel",
        html: "insidePanel3"
    }]
});
Ext.create("Ext.Button", {
    renderTo: 'container',
    text: "open panel3",
    handler: function () {
        Ext.getCmp('panel3').expand(true);
    }
});

html code:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Layouts</title>
<link href="../../ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="../../ext-4.0.7-gpl/ext-all-debug.js" type="text/javascript"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
//js code
</script>  
</body>
</html>

Solution

Your code works OK on my PC (FF, IE 8 and Chrome). So I think you can try it with several ways:

ext-all-gray.css or ext-all-access.css instead of ext-all.css.
ext-all.js instead of ext-all-debug.js.
re-download ext-4.0.7-gpl from Sencha site.