use padding attribute

demos/action-sheet/main.html

@@ -1,3 +1,3 @@
-<ion-content class="padding">
+<ion-content padding>
   <button (click)="openMenu()">Open Action Sheet</button>
 </ion-content>

demos/barkpark/pages/login.html

@@ -6,7 +6,7 @@
 
 </ion-toolbar>
 
-<ion-content class="padding">
+<ion-content padding>
   <form (submit)="doLogin($event)" [control-group]="loginForm">
     <ion-input>
       <input control="email" type="email" placeholder="Your email">

demos/barkpark/pages/tabs/home.html

@@ -1,5 +1,5 @@
 <ion-view nav-title="Stream">
-  <ion-content class="padding">
+  <ion-content padding>
     <h2>Posts</h2>
     <ion-list>
       <ion-item *for="#post of posts" (click)="selectPost(post)">

demos/buttons/main.html

@@ -3,7 +3,7 @@
   <ion-title>Buttons</ion-title>
 </ion-toolbar>
 
-<ion-content class="padding" style="text-align:center">
+<ion-content padding style="text-align:center">
 
 
   <h4>Colors</h4>

demos/hn/pages/top.html

@@ -1,6 +1,6 @@
 <ion-navbar *navbar><ion-title>Top</ion-title></ion-navbar>
 
-<ion-content class="padding">
+<ion-content padding>
 
   <ion-list inset>
     <ion-item *ng-for="#story of stories" (click)="openStory(story)">{{story.title}}</ion-item>

demos/material/index.ts

@@ -29,7 +29,7 @@ import {App, ActionSheet, IonicApp, IonicView, Register} from 'ionic/ionic';
       </ion-item>
     </ion-list>
 
-    <div class="padding">
+    <div padding>
       <ion-card>
         <ion-card-header>
           New Post

demos/menu/page2.html

@@ -11,7 +11,7 @@
 
 </ion-navbar>
 
-<ion-content #content class="padding">
+<ion-content #content padding>
 
   <h3>Page 2</h3>
 

demos/modal/index.ts

@@ -76,7 +76,7 @@ export class ContactModal {
 @IonicView({
   template: `
     <ion-navbar *navbar><ion-title>First Page Header</ion-title><ion-nav-items primary><button id="e2eCloseMenu" (click)="closeModal()">Close</button></ion-nav-items></ion-navbar>
-    <ion-content class="padding">
+    <ion-content padding>
       <p>
         <button (click)="push()">Push (Go to 2nd)</button>
       </p>
@@ -146,7 +146,7 @@ export class ModalFirstPage {
 @IonicView({
   template: `
     <ion-navbar *navbar><ion-title>Second Page Header</ion-title></ion-navbar>
-    <ion-content class="padding">
+    <ion-content padding>
       <p>
         <button (click)="nav.pop()">Pop (Go back to 1st)</button>
       </p>

demos/modal/main.html

@@ -1,3 +1,3 @@
-<ion-content class="padding">
+<ion-content padding>
   <button id="e2eOpenModal" (click)="openModal()">Open Modal</button>
 </ion-content>

demos/native/pages/battery.ts

@@ -9,7 +9,7 @@ import {IonicView, Battery} from 'ionic/ionic';
     </a>
     <ion-title>Battery</ion-title>
   </ion-navbar>
-  <ion-content class="padding">
+  <ion-content padding>
     <h2>Battery</h2>
     <button primary outline (click)="doBatteryStatus()">Get Status</button>
     <div *ng-if="battery">

demos/native/pages/camera.ts

@@ -10,7 +10,7 @@ import {Camera} from 'ionic/ionic';
     </a>
     <ion-title>Camera</ion-title>
   </ion-navbar>
-  <ion-content class="padding">
+  <ion-content padding>
     <h2>Camera</h2>
     <button primary outline (click)="getPicture()">Get Picture</button>
   </ion-content>

demos/native/pages/contacts.ts

@@ -10,7 +10,7 @@ import {Contacts} from 'ionic/ionic';
     </a>
     <ion-title>Contacts</ion-title>
   </ion-navbar>
-  <ion-content class="padding">
+  <ion-content padding>
     <h2>Contacts</h2>
     <div>
     </div>

demos/native/pages/device-motion.ts

@@ -9,7 +9,7 @@ import {IonicView, DeviceMotion} from 'ionic/ionic';
     </a>
     <ion-title>Device Motion</ion-title>
   </ion-navbar>
-  <ion-content class="padding">
+  <ion-content padding>
     <div *ng-if="accel">{{accel.x}} {{accel.y}} {{accel.z}}</div>
   </ion-content>
   `

demos/native/pages/device-orientation.ts

@@ -9,7 +9,7 @@ import {IonicView, DeviceOrientation} from 'ionic/ionic';
     </a>
     <ion-title>Device Orientation</ion-title>
   </ion-navbar>
-  <ion-content class="padding">
+  <ion-content padding>
     <div style="text-align: center">
       <img src="http://ionic-io-assets.s3.amazonaws.com/ionitron-avatar.png" [ng-style]="imageStyle">
     </div>

demos/native/pages/device.ts

@@ -9,7 +9,7 @@ import {IonicView, Device} from 'ionic/ionic';
     </a>
     <ion-title>Device</ion-title>
   </ion-navbar>
-  <ion-content class="padding">
+  <ion-content padding>
     <h2>Device</h2>
     <button primary outline (click)="doDevice()">Get Device</button>
     <div *ng-if="device">

demos/native/pages/dialogs.ts

@@ -9,7 +9,7 @@ import {IonicView, Dialogs} from 'ionic/ionic';
     </a>
     <ion-title>Dialogs</ion-title>
   </ion-navbar>
-  <ion-content class="padding">
+  <ion-content padding>
     <h2>Dialogs</h2>
     <button primary outline (click)="doAlert()">Do Alert</button>
     <button primary outline (click)="doConfirm()">Do Confirm</button>

demos/native/pages/geolocation.ts

@@ -10,7 +10,7 @@ import {Geolocation} from 'ionic/ionic';
     </a>
     <ion-title>Geolocation</ion-title>
   </ion-navbar>
-  <ion-content class="padding">
+  <ion-content padding>
     <h2>Geolocation</h2>
     <button primary outline (click)="doGetLocation()">Get Location</button>
     <div>

demos/native/pages/statusbar.ts

@@ -10,7 +10,7 @@ import {StatusBar} from 'ionic/ionic';
     </a>
     <ion-title>StatusBar</ion-title>
   </ion-navbar>
-  <ion-content class="padding">
+  <ion-content padding>
     <h2>StatusBar</h2>
     <div>
       <button primary outline (click)="hide()">Hide</button>

demos/native/pages/vibration.ts

@@ -10,7 +10,7 @@ import {Vibration} from 'ionic/ionic';
     </a>
     <ion-title>Vibration</ion-title>
   </ion-navbar>
-  <ion-content class="padding">
+  <ion-content padding>
     <h2>Vibration</h2>
     <button primary outline (click)="doVibrate()">Vibrate</button>
   </ion-content>

demos/navigation/index.ts

@@ -8,7 +8,7 @@ import {NavParams, NavController} from 'ionic/ionic';
     '<ion-navbar *navbar primary>' +
       '<ion-title>{{title}}</ion-title>' +
     '</ion-navbar>' +
-    '<ion-content class="padding">' +
+    '<ion-content padding>' +
       '<h1>{{title}}</h1>' +
       '<p><button id="from1To2" secondary (click)="push()">(Push) Go to Second Page</button></p>' +
       '<p><button secondary [push-data]="pushData" [nav-push]="pushPage">(Nav-Push) Go to Second Page</button></p>' +
@@ -47,7 +47,7 @@ class FirstPage {
     <ion-navbar secondary *navbar>
       <ion-title>{{title}}</ion-title>
     </ion-navbar>
-    <ion-content class="padding">
+    <ion-content padding>
       <h1>Second page</h1>
       <p><button (click)="pop()">(Pop) Go back to First Page</button></p>
       <p><button id="from2To1" nav-pop>(NavPop) Go back to First Page</button></p>
@@ -90,7 +90,7 @@ class SecondPage {
     <ion-navbar danger *navbar>
       <ion-title>Third Page Header</ion-title>
     </ion-navbar>
-    <ion-content class="padding">
+    <ion-content padding>
       <p>
         <button secondary id="from3To2" (click)="pop()">(Pop) Go back to Second Page</button>
       </p>

demos/sink/pages/action-sheet.ts

@@ -7,7 +7,7 @@ import {SinkPage} from '../sink-page';
   template: `
   <ion-navbar *navbar><ion-nav-items primary><button icon (click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Action Sheet</ion-title></ion-navbar>
 
-  <ion-content class="padding">
+  <ion-content padding>
     <h2>Action Sheet</h2>
     <p>
       The Action Sheet, similar to Action Sheet's on iOS, is a slide-up prompt

demos/sink/pages/animation.ts

@@ -30,7 +30,7 @@ let scale = 0.6;
     }
   </style>
 
-  <ion-content class="padding">
+  <ion-content padding>
     <h2>Animation</h2>
     <p>
       Ionic comes with a powerful Animation library based on the emerging Web Animation API. Trigger

demos/sink/pages/aside.ts

@@ -7,7 +7,7 @@ import {SinkPage} from '../sink-page';
   template: `
   <ion-navbar *navbar><ion-nav-items primary><button icon (click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Menu</ion-title></ion-navbar>
 
-  <ion-content class="padding">
+  <ion-content padding>
     <h2>Menu</h2>
     <p>
       Menus slide or swipe in to show more information.

demos/sink/pages/button.ts

@@ -7,7 +7,7 @@ import {SinkPage} from '../sink-page';
   template: `
   <ion-navbar *navbar><ion-nav-items primary><button icon (click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Buttons</ion-title></ion-navbar>
 
-  <ion-content class="padding">
+  <ion-content padding>
 
     <h2>Buttons</h2>
     <p>

demos/sink/pages/card.ts

@@ -7,7 +7,7 @@ import {SinkPage} from '../sink-page';
   template: `
   <ion-navbar *navbar><ion-nav-items primary><button icon (click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Cards</ion-title></ion-navbar>
 
-  <ion-content class="padding">
+  <ion-content padding>
     <h2>Cards</h2>
     <p>
       Cards are an emerging UI concept where a bit of content is displayed

demos/sink/pages/form.ts

@@ -9,7 +9,7 @@ import {SinkPage} from '../sink-page';
   template: `
   <ion-navbar *navbar><ion-nav-items primary><button icon (click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Form</ion-title></ion-navbar>
 
-  <ion-content class="padding">
+  <ion-content padding>
     <h2>Forms</h2>
     <p>
       Forms help you gather important information from the user, like

demos/sink/pages/ionicons.ts

@@ -7,7 +7,7 @@ import {SinkPage} from '../sink-page';
   template: `
   <ion-navbar *navbar><ion-nav-items primary><button icon (click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Icons</ion-title></ion-navbar>
 
-  <ion-content class="padding">
+  <ion-content padding>
     <h2>Icons</h2>
     <p>
       Ionic comes with a totally free (in price and license), icon pack (known as "Ionicons") with over 700

demos/sink/pages/list.ts

@@ -7,7 +7,7 @@ import {SinkPage} from '../sink-page';
   template: `
   <ion-navbar *navbar><ion-nav-items primary><button icon (click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Lists</ion-title></ion-navbar>
 
-  <ion-content class="padding">
+  <ion-content padding>
     <h2>Lists</h2>
     <p>
       Lists display data as rows in a table.

demos/sink/pages/modal.ts

@@ -7,7 +7,7 @@ import {SinkPage} from '../sink-page';
   template: `
   <ion-navbar *navbar><ion-nav-items primary><button icon (click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Modal</ion-title></ion-navbar>
 
-  <ion-content class="padding">
+  <ion-content padding>
     <h2>Modal</h2>
     <p>
       Modals are entire views that slide in off screen.

demos/sink/pages/nav.ts

@@ -5,7 +5,7 @@ import {IonicView, NavController} from 'ionic/ionic';
   template: `
   <ion-navbar *navbar><ion-title>Navigation</ion-title></ion-navbar>
 
-  <ion-content class="padding">
+  <ion-content padding>
     <h2>Navigation</h2>
     <p>
       Navigation makes your app feel like, well, an app!
@@ -32,7 +32,7 @@ export class NavPage {
 @IonicView({
   template: `
     <ion-navbar *navbar><ion-title>Second Page</ion-title></ion-navbar>
-    <ion-content class="padding">
+    <ion-content padding>
       <button (click)="nav.pop()">Pop</button>
     </ion-content>
   `

demos/sink/pages/search-bar.ts

@@ -14,7 +14,7 @@ import {SinkPage} from '../sink-page';
   template: `
   <ion-navbar *navbar><ion-nav-items primary><button icon (click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Search Bar</ion-title></ion-navbar>
 
-  <ion-content class="padding">
+  <ion-content padding>
     <h2>Search Bar</h2>
     <p>
       The Search Bar is a multi-function search component.

demos/sink/pages/segment.ts

@@ -7,7 +7,7 @@ import {IonicView} from 'ionic/ionic';
   template: `
   <ion-navbar *navbar><ion-title>Segment</ion-title></ion-navbar>
 
-  <ion-content class="padding">
+  <ion-content padding>
     <h2>Segment</h2>
     <p>
       A segment is a radio-style filter bar to let the user toggle between

demos/sink/pages/slides.ts

@@ -7,7 +7,7 @@ import {SinkPage} from '../sink-page';
   template: `
   <ion-navbar *navbar><ion-nav-items primary><button icon (click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Slides</ion-title></ion-navbar>
 
-  <ion-content class="padding">
+  <ion-content padding>
     <h2>Slides</h2>
     <p>
       Slides have a set of pages that can be swiped between.

demos/sink/pages/tabs.ts

@@ -10,7 +10,7 @@ import {SinkPage} from '../sink-page';
     '<ion-navbar *navbar>' +
       '<ion-title>Featured</ion-title>' +
     '</ion-navbar>' +
-    '<ion-content class="padding">' +
+    '<ion-content padding>' +
     '</ion-content>'
 })
 class FeaturedTabPage {
@@ -24,7 +24,7 @@ class FeaturedTabPage {
     '<ion-navbar *navbar>' +
       '<ion-title>Top</ion-title>' +
     '</ion-navbar>' +
-    '<ion-content class="padding">' +
+    '<ion-content padding>' +
     '</ion-content>'
 })
 class TopTabPage {
@@ -38,7 +38,7 @@ class TopTabPage {
     '<ion-navbar *navbar>' +
       '<ion-title>Search</ion-title>' +
     '</ion-navbar>' +
-    '<ion-content class="padding">' +
+    '<ion-content padding>' +
     '</ion-content>'
 })
 class SearchTabPage {
@@ -52,7 +52,7 @@ class SearchTabPage {
     '<ion-navbar *navbar>' +
       '<ion-title>Updates</ion-title>' +
     '</ion-navbar>' +
-    '<ion-content class="padding">' +
+    '<ion-content padding>' +
     '</ion-content>'
 })
 class UpdatesTabPage {

demos/yerk/index.ts

@@ -16,7 +16,7 @@ class IonicApp {
     '<ion-navbar *navbar>' +
       '<ion-title>Home</ion-title>' +
     '</ion-navbar>' +
-    '<ion-content class="padding">' +
+    '<ion-content padding>' +
       'home' +
     '</ion-content>'
 })
@@ -33,7 +33,7 @@ class HomeTabPage {
     '<ion-navbar *navbar>' +
       '<ion-title>Peek</ion-title>' +
     '</ion-navbar>' +
-    '<ion-content class="padding">' +
+    '<ion-content padding>' +
       'peek' +
     '</ion-content>'
 })

ionic/components/action-sheet/test/basic/main.html

@@ -1,3 +1,3 @@
-<ion-content class="padding">
+<ion-content padding>
   <button (click)="openMenu()">Open Action Sheet</button>
 </ion-content>

ionic/components/button/test/icons/main.html

@@ -3,7 +3,7 @@
   <ion-title>Buttons Icons</ion-title>
 </ion-toolbar>
 
-<ion-content class="padding">
+<ion-content padding>
 
   <div>
     <button>

ionic/components/checkbox/test/basic/main.html

@@ -38,7 +38,7 @@
     <button (click)="doSubmit($event)" outline small id="e2eSubmit">Submit</button>
   </p>
 
-  <p aria-hidden="true" class="padding">
+  <p aria-hidden="true" padding>
     <code>appleCtrl.dirty: {{fruitsForm.controls.appleCtrl.dirty}}</code><br>
     <code>appleCtrl.value: {{fruitsForm.controls.appleCtrl.value}}</code><br>
     <code>bananaCtrl.dirty: {{fruitsForm.controls.bananaCtrl.dirty}}</code><br>
@@ -49,6 +49,6 @@
     <code>grape.value: {{fruitsForm.controls.grapeCtrl.value}}</code><br>
   </p>
 
-  <pre aria-hidden="true" class="padding">{{formResults}}</pre>
+  <pre aria-hidden="true" padding>{{formResults}}</pre>
 
 </ion-content>

ionic/components/list/test/infinite/main.html

@@ -1,7 +1,7 @@
 
 <ion-view nav-title="List">
 
-  <ion-content class="padding" #content>
+  <ion-content padding #content>
 
     <ion-list inset virtual [items]="items" [content]="content">
       <ion-item *cell #item>

ionic/components/menu/test/basic/page2.html

@@ -11,7 +11,7 @@
 
 </ion-navbar>
 
-<ion-content #content class="padding">
+<ion-content #content padding>
 
   <h3>Page 2</h3>
 

ionic/components/modal/test/basic/index.ts

@@ -76,7 +76,7 @@ export class ContactModal {
 @IonicView({
   template: `
     <ion-navbar *navbar><ion-title>First Page Header</ion-title><ion-nav-items primary><button id="e2eCloseMenu" (click)="closeModal()">Close</button></ion-nav-items></ion-navbar>
-    <ion-content class="padding">
+    <ion-content padding>
       <p>
         <button (click)="push()">Push (Go to 2nd)</button>
       </p>
@@ -146,7 +146,7 @@ export class ModalFirstPage {
 @IonicView({
   template: `
     <ion-navbar *navbar><ion-title>Second Page Header</ion-title></ion-navbar>
-    <ion-content class="padding">
+    <ion-content padding>
       <p>
         <button (click)="nav.pop()">Pop (Go back to 1st)</button>
       </p>

ionic/components/modal/test/basic/main.html

@@ -1,3 +1,3 @@
-<ion-content class="padding">
+<ion-content padding>
   <button id="e2eOpenModal" (click)="openModal()">Open Modal</button>
 </ion-content>

ionic/components/nav/test/basic/index.ts

@@ -14,7 +14,7 @@ import {NavParams, NavController} from 'ionic/ionic';
         '<button>S1</button>' +
       '</ion-nav-items>' +
     '</ion-navbar>' +
-    '<ion-content class="padding">' +
+    '<ion-content padding>' +
       '<p>{{title}}</p>' +
       '<p><button id="from1To2" primary (click)="push()">Push (Go to 2nd)</button></p>' +
       '<p><button [push-data]="pushData" [nav-push]="pushPage">Push w/ nav-push (Go to 2nd)</button></p>' +
@@ -55,7 +55,7 @@ class FirstPage {
 
 @IonicView({
   template: `
-    <ion-content class="padding">
+    <ion-content padding>
       <h1>Second page</h1>
       <p>This page does not have a nav bar!</p>
       <p><button (click)="pop()">Pop (Go back to 1st)</button></p>
@@ -100,7 +100,7 @@ class SecondPage {
 @IonicView({
   template: `
     <ion-navbar *navbar><ion-title>Third Page Header</ion-title></ion-navbar>
-    <ion-content class="padding">
+    <ion-content padding>
       <p>
         <button id="from3To2" (click)="pop()">Pop (Go back to 2nd)</button>
       </p>

ionic/components/nav/test/routing/view1.html

@@ -6,7 +6,7 @@
   <ion-title>First View</ion-title>
 </ion-navbar>
 
-<ion-content class="padding">
+<ion-content padding>
   <h4>
     Window Hash: {{windowHash}}
   </h4>

ionic/components/nav/test/routing/view2.html

@@ -8,7 +8,7 @@
   </ion-nav-item>
 </ion-navbar>
 
-<ion-content class="padding">
+<ion-content padding>
   <h4>
     Window Hash: {{windowHash}}
   </h4>

ionic/components/nav/test/routing/view3.html

@@ -3,7 +3,7 @@
   <ion-title>Third View</ion-title>
 </ion-navbar>
 
-<ion-content class="padding">
+<ion-content padding>
   <h4>
     Window Hash: {{windowHash}}
   </h4>

ionic/components/popup/test/basic/main.html

@@ -1,5 +1,5 @@
 
-<ion-content class="padding">
+<ion-content padding>
 
   <button id="e2eOpenAlert" (click)="doAlert()">Alert</button>
   <button id="e2eOpenPrompt" (click)="doPrompt()">Prompt</button>

ionic/components/segment/test/basic/main.html

@@ -1,4 +1,4 @@
-<ion-content class="padding">
+<ion-content padding>
   <form (submit)="doSubmit($event)" [ng-form-model]="myForm">
       <ion-segment ng-control="mapStyle">
         <ion-segment-button value="standard" button>

ionic/components/show-hide-when/test/basic/main.html

@@ -2,7 +2,7 @@
 <ion-toolbar><ion-title>Show/Hide When</ion-title></ion-toolbar>
 
 
-<ion-content class="padding">
+<ion-content padding>
 
   <p show-when="ios" style="background:blue; color:white">
     show-when="ios"

ionic/components/switch/test/basic/main.html

@@ -38,7 +38,7 @@
     <button (click)="doSubmit($event)" outline small id="e2eSubmit">Submit</button>
   </p>
 
-  <p aria-hidden="true" class="padding">
+  <p aria-hidden="true" padding>
     <code>appleCtrl.dirty: {{fruitsForm.controls.appleCtrl.dirty}}</code><br>
     <code>appleCtrl.value: {{fruitsForm.controls.appleCtrl.value}}</code><br>
     <code>bananaCtrl.dirty: {{fruitsForm.controls.bananaCtrl.dirty}}</code><br>
@@ -49,6 +49,6 @@
     <code>grape.value: {{fruitsForm.controls.grapeCtrl.value}}</code><br>
   </p>
 
-  <pre aria-hidden="true" class="padding">{{formResults}}</pre>
+  <pre aria-hidden="true" padding>{{formResults}}</pre>
 
 </ion-content>

ionic/components/tabs/test/advanced/index.ts

@@ -8,7 +8,7 @@ import {App, IonicView, NavController} from 'ionic/ionic';
     '<ion-navbar *navbar>' +
       '<ion-title>Sign In</ion-title>' +
     '</ion-navbar>' +
-    '<ion-content class="padding">' +
+    '<ion-content padding>' +
       '<p><button id="signIn" (click)="push()">Go to tabs</button></p>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
@@ -45,7 +45,7 @@ class TabsPage {
     '<ion-navbar *navbar>' +
       '<ion-title>Tabs 1 Page 1</ion-title>' +
     '</ion-navbar>' +
-    '<ion-content class="padding">' +
+    '<ion-content padding>' +
       '<p><button id="goToTab1Page2" (click)="push()">Go to Tab 1, Page 2</button></p>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
@@ -67,7 +67,7 @@ class Tab1Page1 {
     '<ion-navbar *navbar>' +
       '<ion-title>Tabs 1 Page 2</ion-title>' +
     '</ion-navbar>' +
-    '<ion-content class="padding">' +
+    '<ion-content padding>' +
       '<p><button (click)="push()">Go to Tab 1, Page 3</button></p>' +
       '<p><button id="backToTab1Page1" (click)="nav.pop()">Back to Tab 1, Page 1</button></p>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
@@ -90,7 +90,7 @@ class Tab1Page2 {
     '<ion-navbar *navbar>' +
       '<ion-title>Tabs 1 Page 3</ion-title>' +
     '</ion-navbar>' +
-    '<ion-content class="padding">' +
+    '<ion-content padding>' +
       '<p><button (click)="nav.pop()">Back to Tab 1, Page 2</button></p>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
@@ -112,7 +112,7 @@ class Tab1Page3 {
     '<ion-navbar *navbar>' +
       '<ion-title>Tabs 2 Page 1</ion-title>' +
     '</ion-navbar>' +
-    '<ion-content class="padding">' +
+    '<ion-content padding>' +
       '<p><button (click)="push()">Go to Tab 2, Page 2</button></p>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
@@ -134,7 +134,7 @@ class Tab2Page1 {
     '<ion-navbar *navbar>' +
       '<ion-title>Tabs 2 Page 2</ion-title>' +
     '</ion-navbar>' +
-    '<ion-content class="padding">' +
+    '<ion-content padding>' +
       '<p><button (click)="push()">Go to Tab 2, Page 3</button></p>' +
       '<p><button (click)="nav.pop()">Back to Tab 2, Page 1</button></p>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
@@ -157,7 +157,7 @@ class Tab2Page2 {
     '<ion-navbar *navbar>' +
       '<ion-title>Tabs 2 Page 3</ion-title>' +
     '</ion-navbar>' +
-    '<ion-content class="padding">' +
+    '<ion-content padding>' +
       '<p><button (click)="nav.pop()">Back to Tab 2, Page 2</button></p>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
@@ -179,7 +179,7 @@ class Tab2Page3 {
     '<ion-navbar *navbar>' +
       '<ion-title>Tabs 3</ion-title>' +
     '</ion-navbar>' +
-    '<ion-content class="padding"><h2>Tabs 3</h2></ion-content>'
+    '<ion-content padding><h2>Tabs 3</h2></ion-content>'
 })
 class Tab3Page1 {}
 

ionic/components/tabs/test/basic/main.html

@@ -3,7 +3,7 @@
 
   <ion-tab tab-title="Tab 1" tab-icon="home">
 
-    <ion-content class="padding">
+    <ion-content padding>
       Tab 1 Content
     </ion-content>
 
@@ -11,7 +11,7 @@
 
   <ion-tab tab-title="Tab 2" tab-icon="star">
 
-    <ion-content class="padding">
+    <ion-content padding>
       Tab 2 Content
     </ion-content>
 

ionic/components/tabs/test/tab-bar-bottom/main.html

@@ -3,7 +3,7 @@
 
   <ion-tab tab-title="Tab 1">
     <ion-view nav-title="Tab 1">
-      <ion-content class="padding">
+      <ion-content padding>
         Tab 1 Content
       </ion-content>
     </ion-view>
@@ -11,7 +11,7 @@
 
   <ion-tab tab-title="Tab 2">
     <ion-view nav-title="Tab 2">
-      <ion-content class="padding">
+      <ion-content padding>
         Tab 2 Content
       </ion-content>
     </ion-view>

ionic/components/tabs/test/tab-bar-top/main.html

@@ -3,7 +3,7 @@
 
   <ion-tab tab-title="Tab 1">
     <ion-view nav-title="Tab 1">
-      <ion-content class="padding">
+      <ion-content padding>
         Tab 1 Content
       </ion-content>
     </ion-view>
@@ -11,7 +11,7 @@
 
   <ion-tab tab-title="Tab 2">
     <ion-view nav-title="Tab 2">
-      <ion-content class="padding">
+      <ion-content padding>
         Tab 2 Content
       </ion-content>
     </ion-view>