fix(theme): default to vertical align top on badges inside headings (#1584)

Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>

Author: shigma

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
 

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;