Is there a way to have less space around the admonition text?

[ReaderGuy42]

Really cool plugin, especially combined with the Live Preview mode now :) However, I feel like there is too much space between the title and the text, and then again the text and the end of the admonition block.

Is there a way to remove these blank lines or at least shrink them somehow?

Thanks!

[valentine195]

Sure... Admonition content has a 10px margin on the top and bottom. You can override that with a CSS snippet:

.admonition-content {
    margin-top: 10px;
    margin-bottom: 10px;
}

[ReaderGuy42]

Thanks, but that doesn't change anything. I'm in Live Preview mode, and I saw in the source that there's a different block for that mode, or maybe I misunderstood that.

[valentine195]

That snippet isn't specific enough, you're right. This should work (it does on the help vault for me):

.admonition-content-holder > .admonition-content {
    margin-top: 5px;
    margin-bottom: 5px;
}

Sorry about that!

[ReaderGuy42]

Please stick to 1 issue for discoverability!

Originally posted by @valentine195 in https://github.com/valentine195/obsidian-admonition/issues/204#issuecomment-1059319306

Sorry! I just saw this one had been closed, so I wasn't sure if you would see my other comment.

Now it works, thank you!!

[ReaderGuy42]

Ok, so sorry to re-open this for a third time, that second snippet does reduce the white space/margins, but there is still a significant amount of dead space and I already have it set to 0px This is without the snippet:

This is with the snippet enabled:

Is there some way to further the reduce the margins? Thanks!

[valentine195]

That is probably driven by the paragraph element that the content is rendered as. You could do something like:

.admonition-content > *:first-child {
    margin-top: 0px;
}
.admonition-content > *:last-child {
    margin-bottom: 0px;
}

[ReaderGuy42]

Unfortunately now it's back to having almost no change at all...

[valentine195]

Are you using a theme?

[ReaderGuy42]

I am, I'm using Shimmering Focus (https://github.com/chrisgrieser/shimmering-focus/) but when I just switched to the default theme, there was no real difference either. Does that help?

[valentine195]

Hmm, it looks fine for me with the default theme… you may need to inspect the element in the developer tools to see what CSS is being applied. You can open them with Ctrl+Shift+I (Cmd+Option+I on Mac), then select the element picker (top left icon, looks like a pointer).

[ReaderGuy42]

Ok, which part would you like to see? I mean which elements exactly?

[valentine195]

The admonition content holder.

[ReaderGuy42]

I'm not sure what you're looking for, but is this helpful?

[valentine195]

That is, but for the element above that (the one with class="admonition-content-holder")

[ReaderGuy42]

This?

[valentine195]

Yeah so that one doesn’t have any margins (the orange), which is correct. Can you look at the text content? It’ll likely be a p.

[ReaderGuy42]

[valentine195]

Did you get this working? Does the snippet work in the help vault?

[ReaderGuy42]

It does work, yes, just not quite as much as I'd like, but this is fine, thank you :)