diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css
index 1199fcb19dc56..50b479774453a 100644
--- a/ui_framework/dist/ui_framework.css
+++ b/ui_framework/dist/ui_framework.css
@@ -2739,6 +2739,9 @@ main {
           align-items: flex-end;
   height: 100%; }
 
+/**
+   * 1. Override inherited typographic styles.
+   */
 .kuiLocalTab {
   padding: 5px 0 6px 0;
   font-size: 18px;
@@ -2746,6 +2749,10 @@ main {
   border-bottom: 2px solid transparent;
   text-decoration: none;
   cursor: pointer;
+  margin-top: 0 !important;
+  /* 1 */
+  margin-bottom: 0 !important;
+  /* 1 */
   /**
      * 1. We may want to show a tooltip to explain why the tab is disabled, so we will just show
      *    a regular cursor instead of setting pointer-events: none.
diff --git a/ui_framework/src/components/local_nav/_local_tabs.scss b/ui_framework/src/components/local_nav/_local_tabs.scss
index 583083b1358ea..e57ce3889f8ea 100644
--- a/ui_framework/src/components/local_nav/_local_tabs.scss
+++ b/ui_framework/src/components/local_nav/_local_tabs.scss
@@ -7,6 +7,9 @@
   height: 100%;
 }
 
+  /**
+   * 1. Override inherited typographic styles.
+   */
   .kuiLocalTab {
     padding: 5px 0 6px 0;
     font-size: 18px;
@@ -14,6 +17,8 @@
     border-bottom: 2px solid transparent;
     text-decoration: none;
     cursor: pointer;
+    margin-top: 0 !important; /* 1 */
+    margin-bottom: 0 !important; /* 1 */
 
     &:hover:not(.kuiLocalTab-isDisabled),
     &:active:not(.kuiLocalTab-isDisabled) {