Can anyone tell me how I can get this little margin between the tbar and FormPanel to disappear? I want the toolbar to fit snug up on the form in which it appears.

Code:

var form_customer_contact = new Ext.FormPanel({
    frame:true,
    labelWidth: 90,
    labelAlign: 'right',
    title: 'Customer Contact',
    bodyStyle:'padding:0',
    width: 300,
    height: 600,
    autoScroll: true,
    itemCls: 'form_row',
    defaultType: 'displayfield',
    tbar: [{
            text: 'save',
            iconCls: 'icon_green_check',
            handler: function(){
                window_wrapper.hide();
                var show_button_click_result = new Ext.Panel({
                    title: 'Invoice Address',
                    width: 290,
                    height: 200,
                    html: 'customer contact saved',
                    frame: true,
                    border: true,
                    header: true
                });
                replaceComponentContent(small_box_upper_left, show_button_click_result, true);
            }
        }, '-', {
            text: 'send protocol to customer',
            iconCls: 'icon_arrow_box_upper_right',
            handler: function(){
                var show_button_click_result = new Ext.Panel({
                    title: 'Invoice Address',
                    width: 290,
                    height: 200,
                    html: 'protocol sent to customer',
                    frame: true,
                    border: true,
                    header: true
                });
                replaceComponentContent(small_box_upper_left, show_button_click_result, true);
            }
        }],
    items: [{
            fieldLabel: 'Customer Type',
            name: 'customerType',
            allowBlank:false,
            value: 'Company'
        },{
            fieldLabel: 'Item 20',
            name: 'item20',
            value: 'test'
        }, {
            fieldLabel: 'Item 21',
            name: 'item21',
            value: 'test'
        }, {
            xtype: 'button',
            text: '<span style="color:red">Cancel Order</span>',
            anchor: '100%',
            handler: function() {
                var show_button_click_result = new Ext.Panel({
                    title: 'Invoice Address',
                    width: 290,
                    height: 200,
                    html: 'You cancelled the order.',
                    frame: true,
                    border: true,
                    header: true
                });
                replaceComponentContent(small_box_upper_left, show_button_click_result, true);
            }
        }
    ]
});

Addendum

Thanks to @Johnathan the margin is out, here is the code that works and what it looks like:

#form_customer_information .x-panel-ml,
#form_customer_information .x-panel-mr,
#form_customer_information .x-panel-mc
{
    padding:0px;
}

The reason the padding is there is because you have frame:true -- to get rid of it, just use a CSS rule to target the 3 things causing the padding. Give your panel an ID, something like "form-customer-contact" and then use these 3 rules:

.form-customer-contact .x-panel-ml,
.form-customer-contact .x-panel-mr,
.form-customer-contact .x-panel-mc
{padding:0px;}

[Follow Up] You may want to put the padding back in the form body with another rule, so only the toolbar is expanded... so get rid of your config option for bodyStyle and use this CSS rule:

.form-customer-contact .x-panel-body
{padding:10px;}