diff --git a/packages/settings/styles/src/components/spacing/SpacingGroup.vue b/packages/settings/styles/src/components/spacing/SpacingGroup.vue
index 57dc55861..9379bcee4 100644
--- a/packages/settings/styles/src/components/spacing/SpacingGroup.vue
+++ b/packages/settings/styles/src/components/spacing/SpacingGroup.vue
@@ -5,7 +5,6 @@
         <g>
           <g>
             <path
-              cursor="n-resize"
               mode="delta"
               fill="currentColor"
               d="
@@ -18,14 +17,13 @@
               data-automation-id="margin-top-button"
               aria-label="Margin top button"
               class="tb-path-color"
-              style="cursor: n-resize"
+              @click="clickMargin(SPACING_PROPERTY.MarginTop, $event)"
             ></path>
           </g>
         </g>
         <g>
           <g>
             <path
-              cursor="e-resize"
               mode="delta"
               fill="currentColor"
               d="
@@ -38,14 +36,13 @@
               data-automation-id="margin-right-button"
               aria-label="Margin right button"
               class="lr-path-color"
-              style="cursor: e-resize"
+              @click="clickMargin(SPACING_PROPERTY.MarginRight, $event)"
             ></path>
           </g>
         </g>
         <g>
           <g>
             <path
-              cursor="s-resize"
               mode="delta"
               fill="currentColor"
               d="
@@ -58,14 +55,13 @@
               data-automation-id="margin-bottom-button"
               aria-label="Margin bottom button"
               class="tb-path-color"
-              style="cursor: s-resize"
+              @click="clickMargin(SPACING_PROPERTY.MarginBottom, $event)"
             ></path>
           </g>
         </g>
         <g>
           <g>
             <path
-              cursor="w-resize"
               mode="delta"
               fill="currentColor"
               d="
@@ -78,7 +74,7 @@
               data-automation-id="margin-left-button"
               aria-label="Margin left button"
               class="lr-path-color"
-              style="cursor: w-resize"
+              @click="clickMargin(SPACING_PROPERTY.MarginLeft, $event)"
             ></path>
           </g>
         </g>
@@ -189,7 +185,6 @@
         <g>
           <g>
             <path
-              cursor="s-resize"
               mode="delta"
               fill="currentColor"
               d="
@@ -202,14 +197,13 @@
               data-automation-id="padding-top-button"
               aria-label="Padding top button"
               class="tb-path-color"
-              style="cursor: s-resize"
+              @click="clickPadding(SPACING_PROPERTY.PaddingTop, $event)"
             ></path>
           </g>
         </g>
         <g>
           <g>
             <path
-              cursor="w-resize"
               mode="delta"
               fill="currentColor"
               d="
@@ -222,14 +216,13 @@
               data-automation-id="padding-right-button"
               aria-label="Padding right button"
               class="lr-path-color"
-              style="cursor: w-resize"
+              @click="clickPadding(SPACING_PROPERTY.PaddingRight, $event)"
             ></path>
           </g>
         </g>
         <g>
           <g>
             <path
-              cursor="n-resize"
               mode="delta"
               fill="currentColor"
               d="
@@ -242,14 +235,13 @@
               data-automation-id="padding-bottom-button"
               aria-label="Padding bottom button"
               class="tb-path-color"
-              style="cursor: n-resize"
+              @click="clickPadding(SPACING_PROPERTY.PaddingBottom, $event)"
             ></path>
           </g>
         </g>
         <g>
           <g>
             <path
-              cursor="e-resize"
               mode="delta"
               fill="currentColor"
               d="
@@ -262,7 +254,7 @@
               data-automation-id="padding-left-button"
               aria-label="Padding left button"
               class="lr-path-color"
-              style="cursor: e-resize"
+              @click="clickPadding(SPACING_PROPERTY.PaddingLeft, $event)"
             ></path>
           </g>
         </g>
@@ -537,7 +529,7 @@ export default {
   }
 
   .spacing-edit {
-    cursor: default;
+    cursor: pointer;
     user-select: none;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -600,6 +592,7 @@ export default {
   }
 
   .lr-path-color {
+    cursor: pointer;
     color: var(--ti-lowcode-spacing-lr-color);
     &:hover {
       color: var(--ti-lowcode-spacing-lr-hover-color);
@@ -607,6 +600,7 @@ export default {
   }
 
   .tb-path-color {
+    cursor: pointer;
     color: var(--ti-lowcode-spacing-tb-color);
     &:hover {
       color: var(--ti-lowcode-spacing-tb-hover-color);