diff --git a/app/src/assets/scss/business/_color.scss b/app/src/assets/scss/business/_color.scss
index 964a2c7f4..026656211 100644
--- a/app/src/assets/scss/business/_color.scss
+++ b/app/src/assets/scss/business/_color.scss
@@ -1,6 +1,7 @@
 .color__square {
   height: 26px;
   width: 26px;
+  line-height: 26px;
   margin: 4px;
   border: 0;
   transition: var(--b3-transition);
diff --git a/app/src/protyle/toolbar/Font.ts b/app/src/protyle/toolbar/Font.ts
index 52d4561a8..23d04a828 100644
--- a/app/src/protyle/toolbar/Font.ts
+++ b/app/src/protyle/toolbar/Font.ts
@@ -89,7 +89,7 @@ export const appearanceMenu = (protyle: IProtyle, nodeElements?: Element[]) => {
                     lastColorHTML += `<button class="color__square ariaLabel" data-position="3bottom" aria-label="${window.siyuan.languages.color} ${lastFontStatus[1] ? "" : window.siyuan.languages.default}" ${lastFontStatus[1] ? `style="background-color:${lastFontStatus[1]};color:${lastFontStatus[2]}"` : ""} data-type="${lastFontStatus[0]}">A</button>`;
                     break;
                 case "clear":
-                    lastColorHTML += `<button style="height: 26px;display: flex;align-items: center;" data-type="${lastFontStatus[0]}" class="protyle-font__style ariaLabel" aria-label="${window.siyuan.languages.clearFontStyle}"><svg class="svg--mid"><use xlink:href="#iconTrashcan"></use></svg></button>`;
+                    lastColorHTML += `<button style="height: 26px;display: flex;align-items: center;padding: 0 5px;" data-type="${lastFontStatus[0]}" class="protyle-font__style ariaLabel" aria-label="${window.siyuan.languages.clearFontStyle}"><svg class="svg--mid"><use xlink:href="#iconTrashcan"></use></svg></button>`;
                     break;
             }
         });