How to change the height/padding of the Label component?

Anvil Q&A
1

Hi,
Is there any way to reduce the height/padding of the label component? I tried to modify the CSS to reduce the top and bottom padding of the label objects, but it doesn’t seem to work. Basically I would like to make custom badge component out of the Label objects. For example if I apply the following CSS:

.anvil-role-level-badge {
border-radius: 3px;
padding: 0px 3px;
}

I get the following label:
53%20PM

I can control the left and right padding but not top and bottom (actually, it can be increased but not decreased).

Thanks!

2

Have seen the built-in layout options in the IDE, and found that they are not sufficient (e.g., spacing above, spacing below)? If so you could search the docs for custom roles which will allow you to add some CSS that can be applied flexibly to your label component.

3

I could somewhat make it work using the line-height CSS property. Not sure what would be ideal way of achieving it though.