Unwanted spacing on list view

When we are designing a web app in ionic we are using like

     <ion-header-bar align-title="center" class="bar-positive">

        <h1 class="title ">Dashboard</h1>
</ion-header-bar>
<ion-nav-view  name="viewContent"></ion-nav-view> 
    </ion-content>
<ion-tabs class="tabs-icon-top tabs-custom">

  <!-- Dashboard Tab -->
  <ion-tab title="Home" icon-off="mcfly" icon-on="mcfly"  href="#/dashboard">
  
  </ion-tab>

  <!-- Chats Tab -->
  <ion-tab title="profile" icon-off="mcfly1" icon-on="ion-ios-pulse" href="#/camera">
  
  </ion-tab>
 

  <!-- Account Tab -->
  <ion-tab title="orderdetails" icon-off="mcfly2" icon-on="ion-ios-pulse" ng-click="camera">
  
  </ion-tab>
  <ion-tab title="appointment" icon-off="mcfly3" icon-on="ion-ios-pulse" ng-click="camera" >
  
  </ion-tab>
  <ion-tab title="add member" icon-off="mcfly4" icon-on="ion-ios-pulse">
  
  </ion-tab>

</ion-tabs>

But when we run this in iphone its produces unwanted spacing on top and bottom of the list scrolls under the tab view. Please check the image below