diff --git a/src/button/__test__/__snapshots__/demo.test.js.snap b/src/button/__test__/__snapshots__/demo.test.js.snap
index 3455cc577..07a82b780 100644
--- a/src/button/__test__/__snapshots__/demo.test.js.snap
+++ b/src/button/__test__/__snapshots__/demo.test.js.snap
@@ -169,14 +169,12 @@ exports[`Button Button icon-btn demo works fine 1`] = `
     class="button-example"
   >
     <t-button
-      class="margin"
       content="填充按钮"
       icon="app"
       size="large"
       theme="primary"
     />
     <t-button
-      class="margin"
       loading="{{true}}"
       size="large"
       theme="primary"
@@ -185,7 +183,6 @@ exports[`Button Button icon-btn demo works fine 1`] = `
     </t-button>
     <t-button
       ariaLabel="搜索"
-      class="margin"
       icon="search"
       shape="square"
       size="large"
diff --git a/src/button/_example/base/index.json b/src/button/_example/base/index.json
index 75d1e243e..13ba75f93 100644
--- a/src/button/_example/base/index.json
+++ b/src/button/_example/base/index.json
@@ -1,5 +1,6 @@
 {
   "component": true,
+  "styleIsolation": "shared",
   "usingComponents": {
     "t-button": "tdesign-miniprogram/button/button"
   }
diff --git a/src/button/_example/base/index.wxss b/src/button/_example/base/index.wxss
index c15f8620a..fea4a7eff 100644
--- a/src/button/_example/base/index.wxss
+++ b/src/button/_example/base/index.wxss
@@ -1,4 +1,10 @@
 .button-example {
   margin: 32rpx;
   display: flex;
+  justify-content: space-between;
+}
+
+.button-example:after {
+  content: '';
+  flex: auto;
 }
diff --git a/src/button/_example/button.less b/src/button/_example/button.less
index 23062cc7e..3b782f198 100644
--- a/src/button/_example/button.less
+++ b/src/button/_example/button.less
@@ -1,3 +1,11 @@
 page {
   background-color: #fff;
 }
+
+.t-button {
+  margin-right: 32rpx;
+}
+
+.t-button:last-child {
+  margin-right: 0;
+}
diff --git a/src/button/_example/disabled/index.wxss b/src/button/_example/disabled/index.wxss
index c15f8620a..fea4a7eff 100644
--- a/src/button/_example/disabled/index.wxss
+++ b/src/button/_example/disabled/index.wxss
@@ -1,4 +1,10 @@
 .button-example {
   margin: 32rpx;
   display: flex;
+  justify-content: space-between;
+}
+
+.button-example:after {
+  content: '';
+  flex: auto;
 }
diff --git a/src/button/_example/group-btn/index.wxss b/src/button/_example/group-btn/index.wxss
index bce90875b..c15f8620a 100644
--- a/src/button/_example/group-btn/index.wxss
+++ b/src/button/_example/group-btn/index.wxss
@@ -1,9 +1,4 @@
 .button-example {
   margin: 32rpx;
   display: flex;
-  justify-content: space-between;
-}
-
-.group-btn {
-  margin: 0 16rpx;
 }
diff --git a/src/button/_example/icon-btn/index.wxml b/src/button/_example/icon-btn/index.wxml
index b2b52cfea..f90d9897d 100644
--- a/src/button/_example/icon-btn/index.wxml
+++ b/src/button/_example/icon-btn/index.wxml
@@ -1,8 +1,8 @@
 <view class="button-example">
-  <t-button theme="primary" icon="app" content="填充按钮" size="large" class="margin"></t-button>
-  <t-button wx:if="{{skylineRender}}" theme="light" size="large" class="margin">
-    <t-loading t-class="loading" theme="spinner" size="40rpx" class="wrapper" text="加载中..." />
+  <t-button theme="primary" icon="app" content="填充按钮" size="large"></t-button>
+  <t-button wx:if="{{skylineRender}}" theme="light" size="large">
+    <t-loading t-class="loading" theme="spinner" size="40rpx" text="加载中..." />
   </t-button>
-  <t-button wx:else theme="primary" size="large" loading class="margin">加载中</t-button>
-  <t-button theme="primary" icon="search" shape="square" size="large" class="margin" aria-label="搜索"></t-button>
+  <t-button wx:else theme="primary" size="large" loading>加载中</t-button>
+  <t-button theme="primary" icon="search" shape="square" size="large" aria-label="搜索"></t-button>
 </view>
diff --git a/src/button/_example/icon-btn/index.wxss b/src/button/_example/icon-btn/index.wxss
index ccf862063..ab931a9c2 100644
--- a/src/button/_example/icon-btn/index.wxss
+++ b/src/button/_example/icon-btn/index.wxss
@@ -1,10 +1,12 @@
-.margin {
-  margin-left: 32rpx;
-}
-
 .button-example {
   margin: 32rpx;
   display: flex;
+  justify-content: space-between;
+}
+
+.button-example:after {
+  content: '';
+  flex: auto;
 }
 
 .button-example .loading {
diff --git a/src/button/_example/skyline/button.less b/src/button/_example/skyline/button.less
index c99d087d1..7a284e8b9 100644
--- a/src/button/_example/skyline/button.less
+++ b/src/button/_example/skyline/button.less
@@ -5,4 +5,13 @@ page {
 .button-example {
   margin: 32rpx;
   display: flex;
+  justify-content: space-between;
+}
+
+.t-button {
+  margin-right: 32rpx;
+}
+
+.t-button:last-child {
+  margin-right: 0;
 }
diff --git a/src/button/_example/theme/index.wxss b/src/button/_example/theme/index.wxss
index c15f8620a..8665ebf5b 100644
--- a/src/button/_example/theme/index.wxss
+++ b/src/button/_example/theme/index.wxss
@@ -1,4 +1,5 @@
 .button-example {
   margin: 32rpx;
   display: flex;
+  justify-content: space-between;
 }