Okay got it! so apparently there wasn’t anything in my theme interfering with naked embed.
What I did was delete all of the code of my theme from obsidian.css and just add the naked embed code to test.
Since the same was happening with the default theme, without any of my theme’s code, that means that it’s the naked embed code itself making that bottom margin.
I corrected it by changing the marging value in the 4rth line.
this line:
.markdown-preview-view .markdown-embed-content>:last-child { margin-bottom: -40px;}
All I did was make the marging bottom
have -40px
this gets rid of the big margin. (it was previously on 0)
so now it’s:
{ margin-bottom: -40px;}
You can of course change -40px
to any other number to find the exact space you want, in case you want a bit more or a bit less space.
With that said if you copy this exact code at the end of my theme’s obsidian.css, that should work!
Let me know if it works alright!
/* Naked Embeds */
.markdown-embed-title { display: none; }
.markdown-preview-view .markdown-embed-content>:first-child { margin-top: 0;}
.markdown-preview-view .markdown-embed-content>:last-child { margin-bottom: -40px;}
/*remove the following two line, you will get border and scroll*/
.markdown-preview-view .markdown-embed { border:none; padding:0; margin:0; }
.markdown-preview-view .markdown-embed-content {
max-height: unset;
background-color: var(--background-secondary); /*define different bg color*/
}
/* the link on the top right corner*/
.markdown-embed-link {
color: var(--text-faint) !important;
}
.markdown-embed-link:hover {
color: var(--text-accent) !important;
}