diff --git a/packages/theme/src/badge/index.less b/packages/theme/src/badge/index.less
index 46cfaa942..2039ae728 100644
--- a/packages/theme/src/badge/index.less
+++ b/packages/theme/src/badge/index.less
@@ -33,7 +33,7 @@
   vertical-align: baseline;
   white-space: nowrap;
   text-align: center;
-  margin-left: 4px;
+  margin-left: var(--ti-badge-margin-left);
   border: var(--ti-badge-border) solid #FFFFFF;
 
   &:empty {
diff --git a/packages/theme/src/badge/smb-theme.js b/packages/theme/src/badge/smb-theme.js
index e3a2d83a1..a70b51702 100644
--- a/packages/theme/src/badge/smb-theme.js
+++ b/packages/theme/src/badge/smb-theme.js
@@ -6,5 +6,6 @@ export const tinyBadgeSmbTheme = {
   'ti-badge-text-color': 'var(--ti-base-color-bg-7)',
   'ti-badge-border-radius': 'var(--ti-common-border-radius-4)',
   'ti-badge-border': 'var(--ti-common-border-weight-normal)',
-  'ti-badge-font-weight': 'var(--ti-common-font-weight-normal)'
+  'ti-badge-font-weight': 'var(--ti-common-font-weight-normal)',
+  'ti-badge-margin-left': '0'
 }
diff --git a/packages/theme/src/badge/vars.less b/packages/theme/src/badge/vars.less
index 9b5b5a679..50c49afad 100644
--- a/packages/theme/src/badge/vars.less
+++ b/packages/theme/src/badge/vars.less
@@ -27,4 +27,5 @@
   --ti-badge-danger-bg-color: var(--ti-base-color-error-3, #f66f6a);
   --ti-badge-info-bg-color: var(--ti-common-color-info-normal, #252b3a);
   --ti-badge-border: 0;
+  --ti-badge-margin-left: 4px;
 }
diff --git a/packages/vue/src/badge/src/pc.vue b/packages/vue/src/badge/src/pc.vue
index c2bdd2a3e..e111ecbd0 100644
--- a/packages/vue/src/badge/src/pc.vue
+++ b/packages/vue/src/badge/src/pc.vue
@@ -22,7 +22,7 @@
         type ? 'tiny-badge--' + type : '',
         badgeClass || ''
       ]"
-      :style="state.transform"
+      :style="!isDot ? state.transform : ''"
     >
       <slot name="content">
         <a v-if="state.href" :href="state.href" :target="target" rel="noopener noreferrer">{{ state.content }}</a>