Native callouts take up quite a bit of room sometimes, and the extra padding surrounding the callout body is bulky, and unnecessary is there a variable I can tweak to modify that in a minimalist css file, so it is a similar size to regular block-quotes?
I have tried modifying --callout-content-padding:; but it is already at 0
and of course, I have already tried looking at other posts, and there wasn’t a direct solution, or a workaround I could understand.
Works for paragraphs in the default theme. If you have other elements (table, another callout, etc.) as the first or last item, you’d have to change their margins too to keep symmetry.
Can confirm your code works for me both in the sandbox as well as in like 10 themes and with my own callout styling snippet active.
@Devilofether After inserting the snippet in an active snippet .css file use the inspector tool to see if there is any conflicting css that may be overriding the snippet.
As @dawni noted you’re going to be adjusting the margins, of the .callout-content, not the padding. This is just ensuring that the the top and bottom margins of the paragraphs in the content are the same.
Also, if you’ve arleady got styling that you’ve dropped this snippet into you could share the full snippet so we can see if there’s an issue there… but the dev tool will for sure highlight anything that’s overrulling and/or conflicting with the snippet.
I’d personally be a little wary of that, because some things might have margins for good reason. But you could roll with it, and if you ever encounter a problem, you could then exclude that particular item with *:not(the-problem-element):last-of-type .
Another way is to list out the elements you know for sure you want to include:
As you can see, there are huge spaces between sets of elements when they are within headers, but not on the base document (I have the minimal theme to show off that it affects the paragraph to header space as well). Thank you very much so far
(there are no new lines within the callouts by the way)
That’s because what you’re see in the callouts is rendered, in the same way you would see them in the Reading view. That non-callout content in Live Preview is an approximation of the “real” rendering. You can target the real rendering with .markdown-rendered.
If that works for you, cool. If not, you might have to use the inspector to find the more specific selectors (aka “words”) needed for the theme you’re using.