I want to reduce the callout text padding

[Devilofether]

What I’m trying to do

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?

Things I have tried

This is my current CSS file for callouts

--callout-padding: var(--size-4-3) var(--size-4-3) var(--size-4-3) var(--size-4-6);
--callout-border-width: 4px;

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.

[dawni]

It’s probably from margins on items inside the callout content. Try:

.callout-content p:first-of-type {
	margin-top: 0;
}

.callout-content p:last-of-type {
	margin-bottom: 0;
}

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.

[Devilofether]

I tried copy/pasting it into my CSS snippet file with default CSS, and it didn’t work

[dawni]

By “default CSS”, do you mean the default theme, no plugins, and no other snippets? And this snippet was enabled? Just making sure.

Here’s what I see. No snippet:

With snippet:

From this content:

> [!note]
> text

And this orange part here (the p margin) is what we’re targeting:

Does anything seem different between what we’re doing?

[Kinder]

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.

[Devilofether]

that is exactly what I mean, that is the part I am trying to resolve

[Devilofether]

I posted my entire snippet in my post, ill try messing with .callout-content and let you know if it is successful

[Devilofether]

I figured it out, I was formatting the variables wrong; I was pulling code directly from the inspector to make the original snippet

.callout-padding
{
	left: 12px;
	top: 12px;
	bottom: 12px;
	right: 16px;
}
.callout-content p:first-of-type {
	margin-top: 0;
}

.callout-content p:last-of-type {
	margin-bottom: 0;
}

but, as predicted, it doesn’t work for most other elements, primarily lists, headers and charts

[dawni]

Glad it worked. So now you just add in all the elements you want.

One way is to toss a giant blanket on everything and anything that might appear first or last in your callouts, and remove their margins, like this:

.callout-content *:first-of-type {
	margin-top: 0;
}

.callout-content *:last-of-type {
	margin-bottom: 0;
}

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:

.callout-content :is(p, ul, ol):first-of-type {
	margin-top: 0;
}

.callout-content :is(p, ul, ol):last-of-type {
	margin-bottom: 0;
}

Whenever you encounter another element you want to include, add to the list inside :is().

[Devilofether]

That worked perfectly, but now I have a different problem I can’t solve with that codeline:

this is my current CSS file:

and this is Obsidian:

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)

[dawni]

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.

In the default theme, you can do it like this:

.markdown-rendered *:is(ul, ol, p, table) {
	margin-block-end: 0;
	margin-block-start: 0;
}

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.