I want to reduce the callout text padding

Custom CSS & Theme Design
1

What I’m trying to do

Capture
Capture712×152 2.82 KB

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.

2

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.

3

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

4

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:

default
default685×222 2.16 KB

With snippet:

margin removed
margin removed637×175 2.07 KB

From this content:

> [!note]
> text

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

padding
padding656×218 5.47 KB

Does anything seem different between what we’re doing?

5

:backhand_index_pointing_up: 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.

6

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

7

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

8

(post deleted by author)

9

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