diff --git a/packages/action-sheet/index.less b/packages/action-sheet/index.less
index e4150850..06f6de7c 100644
--- a/packages/action-sheet/index.less
+++ b/packages/action-sheet/index.less
@@ -1,9 +1,8 @@
 @import '../common/style/var.less';
 
 .van-action-sheet {
-  color: @text-color;
   max-height: 90% !important;
-  background-color: @background-color !important;
+  color: @text-color;
 
   &__item,
   &__cancel {
@@ -27,13 +26,14 @@
   }
 
   &__subname {
+    margin-left: 5px;
     font-size: 12px;
     color: @gray-darker;
-    margin-left: 5px;
   }
 
-  &__cancel {
-    margin-top: 10px;
+  &__blank {
+    height: 10px;
+    background-color: @background-color;
   }
 
   &__header {
@@ -44,12 +44,12 @@
   }
 
   &__close {
+    position: absolute !important;
     top: 0;
     right: 0;
     padding: 0 15px;
-    color: @gray-dark;
     font-size: 18px !important;
-    position: absolute !important;
     line-height: inherit !important;
+    color: @gray-dark;
   }
 }
diff --git a/packages/action-sheet/index.wxml b/packages/action-sheet/index.wxml
index 5bfe879d..f0c391a0 100644
--- a/packages/action-sheet/index.wxml
+++ b/packages/action-sheet/index.wxml
@@ -29,12 +29,14 @@
     </block>
     <van-loading wx:else size="20px" />
   </button>
-  <view
-    wx:if="{{ cancelText }}"
-    class="van-action-sheet__cancel"
-    bind:tap="onCancel"
-  >
-    {{ cancelText }}
-  </view>
+  <block wx:if="{{ cancelText }}">
+    <view class="van-action-sheet__blank" />
+    <view
+      class="van-action-sheet__cancel"
+      bind:tap="onCancel"
+    >
+      {{ cancelText }}
+    </view>
+  </block>
   <slot />
 </van-popup>