diff --git a/src/views/Editor/CanvasTool/index.vue b/src/views/Editor/CanvasTool/index.vue
index 56eafb42..2903bc2b 100644
--- a/src/views/Editor/CanvasTool/index.vue
+++ b/src/views/Editor/CanvasTool/index.vue
@@ -251,12 +251,6 @@ const openSraechPanel = () => {
 
   .handler-item {
     width: 32px;
-    height: 24px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin: 0 2px;
-    border-radius: $borderRadius;
 
     &:not(.group-btn):hover {
       background-color: #f1f1f1;
@@ -303,8 +297,13 @@ const openSraechPanel = () => {
   }
 }
 .handler-item {
-  margin: 0 10px;
+  height: 24px;
   font-size: 14px;
+  margin: 0 2px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: $borderRadius;
   overflow: hidden;
   cursor: pointer;
 
@@ -312,6 +311,15 @@ const openSraechPanel = () => {
     opacity: .5;
   }
 }
+.left-handler, .right-handler {
+  .handler-item {
+    padding: 0 8px;
+
+    &:not(.disable):hover {
+      background-color: #f1f1f1;
+    }
+  }
+}
 .right-handler {
   display: flex;
   align-items: center;
@@ -352,9 +360,6 @@ const openSraechPanel = () => {
   .text {
     display: none;
   }
-  .handler-item {
-    margin: 0 5px;
-  }
 }
 @media screen and (width <= 1000px) {
   .left-handler, .right-handler {