diff --git a/src/components/AvatarView.svelte b/src/components/AvatarView.svelte
index de0a5bd..867e510 100644
--- a/src/components/AvatarView.svelte
+++ b/src/components/AvatarView.svelte
@@ -118,7 +118,7 @@
 	}
 </script>
 
-<div class="flex" class:reverse={state?.side === "right"}>
+<div class="avatar-view flex" class:reverse={state?.side === "right"}>
 	<div
 		class="avatar-container relative"
 		on:click={updateImage}
diff --git a/styles.css b/styles.css
index 4c6519b..3eb9c58 100644
--- a/styles.css
+++ b/styles.css
@@ -2,6 +2,11 @@
 	float: right;
 }
 
+.markdown-preview-view .avatar-view {
+	margin-block-start: var(--p-spacing);
+	margin-block-end: var(--p-spacing);
+}
+
 .avatar-plugin--md > *:first-child {
 	margin-block-start: 0;
 }