title: How can I get the margin between an Ext JS Form and its toolbar to disappear?
body: <p>Can anyone tell me how I can get this little margin between the <code>tbar</code> and <code>FormPanel</code> to disappear? I want the toolbar to fit snug up on the form in which it appears.</p>
  
  <p><img src="https://i.stack.imgur.com/Y72Hr.png" alt="enter image description here"></p>
  
  <p>Code:</p>
  
  <pre><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: '&lt;span style="color:red"&gt;Cancel Order&lt;/span&gt;',
              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);
              }
          }
      ]
  });
  </code></pre>
  
  <h1>Addendum</h1>
  
  <p>Thanks to @Johnathan the margin is out, here is the code that works and what it looks like:</p>
  
  <pre><code>#form_customer_information .x-panel-ml,
  #form_customer_information .x-panel-mr,
  #form_customer_information .x-panel-mc
  {
      padding:0px;
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/pjOwO.png" alt="enter image description here"></p>