diff --git a/docs/guide/theme-badge.md b/docs/guide/theme-badge.md
index 99b43151c03f..9a4363f3be9b 100644
--- a/docs/guide/theme-badge.md
+++ b/docs/guide/theme-badge.md
@@ -15,10 +15,10 @@ You may use the `Badge` component which is globally available.
 
 Code above renders like:
 
-### Title <Badge type="info" text="default" vertical="middle" />
-### Title <Badge type="tip" text="^1.9.0" vertical="middle" />
-### Title <Badge type="warning" text="beta" vertical="middle" />
-### Title <Badge type="danger" text="caution" vertical="middle" />
+### Title <Badge type="info" text="default" />
+### Title <Badge type="tip" text="^1.9.0" />
+### Title <Badge type="warning" text="beta" />
+### Title <Badge type="danger" text="caution" />
 
 ## Custom Children
 
diff --git a/src/client/theme-default/components/VPBadge.vue b/src/client/theme-default/components/VPBadge.vue
index 0d7d20d4dfdf..c99701f7c9f1 100644
--- a/src/client/theme-default/components/VPBadge.vue
+++ b/src/client/theme-default/components/VPBadge.vue
@@ -19,11 +19,20 @@ defineProps<{
   border-radius: 10px;
   padding: 0 8px;
   line-height: 18px;
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 600;
   transform: translateY(-2px);
 }
 
+h1 .VPBadge,
+h2 .VPBadge,
+h3 .VPBadge,
+h4 .VPBadge,
+h5 .VPBadge,
+h6 .VPBadge {
+  vertical-align: top;
+}
+
 h2 .VPBadge {
   border-radius: 11px;
   line-height: 20px;