diff --git a/packages/core/src/components/tab-button/tab-button.ios.scss b/packages/core/src/components/tab-button/tab-button.ios.scss
index 8aa396e4c4..e6defa8915 100644
--- a/packages/core/src/components/tab-button/tab-button.ios.scss
+++ b/packages/core/src/components/tab-button/tab-button.ios.scss
@@ -2,10 +2,7 @@
 @import "./tab-button.ios.vars";
 
 .tab-button-ios {
-  @include padding($tab-button-ios-padding-top, $tab-button-ios-padding-end, $tab-button-ios-padding-bottom, $tab-button-ios-padding-start);
-
   max-width: $tab-button-ios-max-width;
-  min-height: 100%;
 
   font-size: $tab-button-ios-font-size;
   color: $tab-button-ios-text-color;
@@ -13,6 +10,14 @@
   fill: $tab-button-ios-icon-color;
 }
 
+.tab-button-ios .tab-cover {
+  @include padding(
+    $tab-button-ios-padding-top,
+    $tab-button-ios-padding-end,
+    $tab-button-ios-padding-bottom,
+    $tab-button-ios-padding-start);
+}
+
 .enable-hover .tab-button-ios:hover,
 .tab-button-ios.tab-selected {
   color: $tab-button-ios-text-color-active;
diff --git a/packages/core/src/components/tab-button/tab-button.md.scss b/packages/core/src/components/tab-button/tab-button.md.scss
index 540ba8d4ab..5a0f98ae8f 100644
--- a/packages/core/src/components/tab-button/tab-button.md.scss
+++ b/packages/core/src/components/tab-button/tab-button.md.scss
@@ -5,6 +5,15 @@
 // --------------------------------------------------
 
 .tab-button-md {
+  max-width: 168px;
+
+  font-weight: $tab-button-md-font-weight;
+  color: $tab-button-md-text-color;
+
+  fill: $tab-button-md-icon-color;
+}
+
+.tab-button-md .tab-cover {
   @include padding(
     $tab-button-md-padding-top,
     $tab-button-md-padding-end,
@@ -12,14 +21,6 @@
     $tab-button-md-padding-start);
 
   display: flex;
-
-  max-width: 168px;
-  height: 100%;
-
-  font-weight: $tab-button-md-font-weight;
-  color: $tab-button-md-text-color;
-
-  fill: $tab-button-md-icon-color;
 }
 
 .scrollable .tab-button-md {
diff --git a/packages/core/src/components/tab-button/tab-button.scss b/packages/core/src/components/tab-button/tab-button.scss
index 474459e49b..ddb8d7c68f 100644
--- a/packages/core/src/components/tab-button/tab-button.scss
+++ b/packages/core/src/components/tab-button/tab-button.scss
@@ -13,9 +13,8 @@ ion-tab-button {
   overflow: hidden;
 
   flex: 1;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
+
+  height: 100%;
 
   border: 0;
 
@@ -26,6 +25,9 @@ ion-tab-button {
 }
 
 .tab-cover {
+  @include margin(0);
+  @include padding(0);
+
   display: flex;
 
   flex-direction: column;
@@ -36,7 +38,7 @@ ion-tab-button {
   height: 100%;
 
   border: 0;
-  outline: none;
+  //outline: none;
   color: inherit;
   background: transparent;
   cursor: pointer;