How to give spaces in between the tabs in sencha touch?
===

In my application, i am trying to give some empty space between the two tabs. For that, i added one space between the tabs. Like below code:

 

                              {
                                    xtype : 'container',
                                    styleHtmlContent : true,
                                    layout : {
                                        type : 'card'
                                    },
                                    title : 'Home',
                                    iconCls : 'home'
                              },
                                {
                                    xtype : 'spacer'
                                },
                                {
                                    xtype : 'addwishlog',
                                    styleHtmlContent : true,
                                    title : '+ Wishlog',
                                    iconCls : 'favorites',
                                },

                                {
                                    xtype : 'spacer'
                                },
                                {
                                    xtype : 'addfeedback',
                                    styleHtmlContent : true,
                                    layout : {
                                        type : 'card'
                                    },
                                    title : '+ Feedback',
                                    iconCls : 'reply'
                                  
                                } ],

                        tabBar : {
                            docked : 'bottom',
                            height : 80,
                            ui : 'tabbarUi',
                            layout : {
                                align : 'center',
                                pack : 'center',
                                type : 'hbox'
                            }
                        }
                    }

But the problem is, i am able to tap on that empty space also. It is behaving like instead of three tabs, there are five tabs are present. 

I customize my tabview in the css file like this:

   

     .x-tabbar > * {
      z-index: 4;
    }
    .x-tabbar.x-docked-bottom .x-tab .x-button-icon {
    	-webkit-mask-size: 3.0em;
    	width: 3.0em;
    	height: 3.0em;
    	margin: 0 auto;
    	position: relative;
    }
    
    .x-tabbar {
        height: 1em;
    }
    .x-tabbar.x-docked-bottom .x-tab .x-button-label {
            margin: 0;
            padding: .1em 0 .2em 0;
            font-size: 15px;
            line-height: 12px;
            text-rendering: optimizeLegibility;
            -webkit-font-smoothing: antialiased;
          }

How can i resolve this issue???