I have been really bugged by the large blank space/margin when using embedded links. “Minimal”, “ITS” themes has a feature called “Strict Embed” & “Clean Embed” that is capable of removing this blank space, but I prefer the aesthetic of a plain obsidian, so I was trying to make a CSS snippet that can do just that. So after begging to the AI gods for literally hours, I was able to partially remove the blank spaces with this code.
[Before & After]
/* Remove margins and paddings from internal embeds without affecting the border */
div.internal-embed,
div.internal-embed-container,
div.internal-embed .markdown-embed-content,
div.internal-embed .markdown-embed {
margin: 0 !important;
padding: 0 !important;
background: none !important;
}
/* Ensure the purple left border is preserved */
div.internal-embed .markdown-embed {
border-left: inherit !important;
padding-left: 0 !important; /* Remove any internal padding */
margin-left: 0 !important; /* Remove any internal margin */
}
/* Ensure block-level elements display correctly */
div.internal-embed .markdown-embed-content p,
div.internal-embed .markdown-embed-content h1,
div.internal-embed .markdown-embed-content h2,
div.internal-embed .markdown-embed-content h3,
div.internal-embed .markdown-embed-content h4,
div.internal-embed .markdown-embed-content h5,
div.internal-embed .markdown-embed-content h6,
div.internal-embed .markdown-embed-content ul,
div.internal-embed .markdown-embed-content ol,
div.internal-embed .markdown-embed-content blockquote,
div.internal-embed .markdown-embed-content pre,
div.internal-embed .markdown-embed-content code {
margin: 0 !important;
padding: 0 !important;
display: block !important;
color: inherit !important;
}
/* Ensure inline elements display correctly */
div.internal-embed .markdown-embed-content a,
div.internal-embed .markdown-embed-content strong,
div.internal-embed .markdown-embed-content em,
div.internal-embed .markdown-embed-content del,
div.internal-embed .markdown-embed-content ins,
div.internal-embed .markdown-embed-content code {
color: inherit !important;
font-weight: inherit !important;
font-style: inherit !important;
text-decoration: inherit !important;
}
/* Reset image and media styles */
div.internal-embed .markdown-embed-content img,
div.internal-embed .markdown-embed-content video,
div.internal-embed .markdown-embed-content audio {
max-width: 100% !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
}
/* Apply styles in editing mode as well */
div.internal-embed .markdown-embed-content.is-editing {
all: unset !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
background: none !important;
font-family: inherit !important;
font-size: inherit !important;
font-style: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
color: inherit !important;
text-align: inherit !important;
}
/* Ensure block-level elements display correctly in editing mode */
div.internal-embed .markdown-embed-content.is-editing p,
div.internal-embed .markdown-embed-content.is-editing h1,
div.internal-embed .markdown-embed-content.is-editing h2,
div.internal-embed .markdown-embed-content.is-editing h3,
div.internal-embed .markdown-embed-content.is-editing h4,
div.internal-embed .markdown-embed-content.is-editing h5,
div.internal-embed .markdown-embed-content.is-editing h6,
div.internal-embed .markdown-embed-content.is-editing ul,
div.internal-embed .markdown-embed-content.is-editing ol,
div.internal-embed .markdown-embed-content.is-editing blockquote,
div.internal-embed .markdown-embed-content.is-editing pre,
div.internal-embed .markdown-embed-content.is-editing code {
margin: 0 !important;
padding: 0 !important;
display: block !important;
color: inherit !important;
}
/* Ensure inline elements display correctly in editing mode */
div.internal-embed .markdown-embed-content.is-editing a,
div.internal-embed .markdown-embed-content.is-editing strong,
div.internal-embed .markdown-embed-content.is-editing em,
div.internal-embed .markdown-embed-content.is-editing del,
div.internal-embed .markdown-embed-content.is-editing ins,
div.internal-embed .markdown-embed-content.is-editing code {
color: inherit !important;
font-weight: inherit !important;
font-style: inherit !important;
text-decoration: inherit !important;
}
/* Reset image and media styles in editing mode */
div.internal-embed .markdown-embed-content.is-editing img,
div.internal-embed .markdown-embed-content.is-editing video,
div.internal-embed .markdown-embed-content.is-editing audio {
max-width: 100% !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
}
However I(actually Chat GPT) just can’t remove the large blank space in the left and a little bit of blank space in the top no matter how much I try(with AI and also with my monkey brain) and this has been driving me kind of crazy.
Therefore I am requesting help to the experts of the obsidian forum, to finally prove that we humans are superior than a messily AI. (and to also protect my sanity. Please Help Me.)
