diff --git a/composables/content-parse.ts b/composables/content-parse.ts
index 59127e70..c7be74c0 100644
--- a/composables/content-parse.ts
+++ b/composables/content-parse.ts
@@ -120,7 +120,7 @@ export function treeToText(input: Node): string {
 
   // add spaces around emoji to prevent parsing errors: 2 or more consecutive emojis will not be parsed
   if (input.name === 'img' && input.attributes.class?.includes('custom-emoji'))
-    return `:${input.attributes['data-emoji-id']}:`
+    return ` :${input.attributes['data-emoji-id']}: `
 
   if (input.name === 'em-emoji')
     return `${input.attributes.native}`
diff --git a/styles/global.css b/styles/global.css
index 6ddbe00c..ab5b2555 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -85,7 +85,6 @@ body {
   overflow: hidden;
   max-height: 1.3em;
   max-width: 1.3em;
-  margin: 0 0.2em;
   vertical-align: text-bottom;
 }
 
@@ -132,6 +131,10 @@ body {
 .content-editor {
   --at-apply: outline-none flex-1;
   max-width: 100%;
+
+  .custom-emoji {
+    margin: 0 0.2em;
+  }
 }
 
 .skeleton-loading-bg {
diff --git a/tests/__snapshots__/html-parse.test.ts.snap b/tests/__snapshots__/html-parse.test.ts.snap
index c9a57001..20435672 100644
--- a/tests/__snapshots__/html-parse.test.ts.snap
+++ b/tests/__snapshots__/html-parse.test.ts.snap
@@ -52,7 +52,7 @@ exports[`html-parse > custom emoji > html 1`] = `
 "
 `;
 
-exports[`html-parse > custom emoji > text 1`] = `"Daniel Roe :nuxt:"`;
+exports[`html-parse > custom emoji > text 1`] = `"Daniel Roe  :nuxt:"`;
 
 exports[`html-parse > emojis > html 1`] = `
 "<em-emoji native=\\"🇫🇷\\" fallback=\\"🇫🇷\\"></em-emoji>