lightning-input checkbox margin-right

I have a custom table in LWC and standard margin of


breaks cell center alignment.
I know that since it is a nested component I can’t set css directly and I think it is also not possible to change via Styling Hooks?

lightning-input checkbox margin-right

Edit: just to simplify my question. lightning-input has a default margin-right and I need to get rid of it to center the checkbox in my td table cell correctly


Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Your last screenshot gives it away:

margin-right: var(--lwc-spacingXSmall,0.5rem)

True, 0.5rem is the default. So set your own –lwc-spacingXSmall:

:host {
    --lwc-spacingXSmall: 0;

It’s all about the “var” keyword here:

A styling hook is a placeholder in the SLDS style sheet, for example, var(–slds-c-badge–color-background, #ecebea), which enables you to customize the style using the corresponding –slds-c-badge-color-background CSS custom property.

Maybe worth pointing out that the unfortunate “slds-checkbox_faux” seems the result of applying the “label-hidden” variant. I haven’t checked, but you could play with other variants and leaving the label empty too.

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Notify of

Inline Feedbacks
View all comments
Would love your thoughts, please comment.x