diff --git a/app/src/assets/scss/component/_typography.scss b/app/src/assets/scss/component/_typography.scss
index afbb85115..2f0e71a79 100644
--- a/app/src/assets/scss/component/_typography.scss
+++ b/app/src/assets/scss/component/_typography.scss
@@ -263,6 +263,8 @@
     position: relative;
     padding: 0;
     margin: 1em 0;
+    display: flex;
+    flex-direction: row-reverse;
 
     .protyle-action {
       left: 4px;
@@ -304,11 +306,7 @@
     min-height: 22px !important;
     overflow-x: overlay;
     tab-size: 4;
-
-    &.protyle-linenumber {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-    }
+    flex: 1;
   }
 
   [data-subtype="echarts"],
@@ -535,14 +533,11 @@
   }
 
   &-linenumber {
-    margin-left: calc(3.6em);
-    position: relative;
+    border-top-left-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
 
     &__rows {
-      position: absolute;
       pointer-events: none;
-      top: 0;
-      left: 0;
       user-select: none;
       counter-reset: linenumber;
       font-size: 85%;
diff --git a/app/src/protyle/render/highlightRender.ts b/app/src/protyle/render/highlightRender.ts
index 0e65760e1..f94b3009b 100644
--- a/app/src/protyle/render/highlightRender.ts
+++ b/app/src/protyle/render/highlightRender.ts
@@ -136,7 +136,7 @@ export const lineNumberRender = (block: HTMLElement) => {
     block.parentElement.style.lineHeight = `${((parseInt(block.parentElement.style.fontSize) || window.siyuan.config.editor.fontSize) * 1.625 * 0.85).toFixed(0)}px`;
     const lineNumberTemp = document.createElement("div");
     lineNumberTemp.className = "hljs protyle-linenumber";
-    lineNumberTemp.setAttribute("style", `padding-top:0 !important;padding-bottom:0 !important;min-height:auto !important;white-space:${block.style.whiteSpace};word-break:${block.style.wordBreak};font-variant-ligatures:${block.style.fontVariantLigatures};`);
+    lineNumberTemp.setAttribute("style", `box-sizing: border-box;width: calc(100% - 3.6em);position: absolute;padding-top:0 !important;padding-bottom:0 !important;min-height:auto !important;white-space:${block.style.whiteSpace};word-break:${block.style.wordBreak};font-variant-ligatures:${block.style.fontVariantLigatures};`);
     lineNumberTemp.setAttribute("contenteditable", "true");
     block.insertAdjacentElement("afterend", lineNumberTemp);
 
@@ -160,11 +160,9 @@ export const lineNumberRender = (block: HTMLElement) => {
     });
 
     lineNumberTemp.remove();
-    const height = block.offsetHeight;
     if (block.nextElementSibling?.classList.contains("protyle-linenumber__rows")) {
         block.nextElementSibling.innerHTML = lineNumberHTML;
-        (block.nextElementSibling as HTMLElement).style.height = height + "px";
     } else {
-        block.insertAdjacentHTML("afterend", `<span contenteditable="false" style="height:${height}px" class="protyle-linenumber__rows">${lineNumberHTML}</span>`);
+        block.insertAdjacentHTML("afterend", `<span contenteditable="false" class="protyle-linenumber__rows">${lineNumberHTML}</span>`);
     }
 };