Reduce size box LWC

Question

Hello everybody I am trying to reduce the space that surround the buttons of this section:

in order to make it look more visually attractive. The code is the next one:

       <template iterator:it={iteratorTelefono}>
          <div key={it.value.autoNumber} class="slds-grid d-flex  slds-box paddingCajas">
             <div class="lightningCardClass slds-col slds-size_4-of-12 slds-p-around_small">
                <lightning-input label="Prefijo"  variant="label-hidden" data-index={it.index}  value={it.value.qx_PrefijoPais} placeholder="Prefijo" type="text" max-length="3"   onchange={handlePrefijoPais}></lightning-input>
                </div>
                     <div class="lightningCardClass slds-col slds-size_4-of-12 slds-p-around_small ">
                         <lightning-input type="text"  placeholder="Número de teléfono" variant="label-hidden" data-index={it.index} value={it.value.qx_Numero} max-length="9"   onchange={handleTelefono}></lightning-input>
                     </div>
                     <div class="lightningCardClass slds-col slds-size_4-of-12 slds-p-around_small" >
                        <template if:false={it.value.recordId}>
                             <lightning-button onclick={onRemoveTelefono} if:false={it.first} variant="destructive"  label='Borrar' data-index={it.index}  class="slds-var-m-left_x-small paddingFields"></lightning-button>
                        </template>
                        <lightning-button  if:true={it.value.recordId} onclick={onRemoveTelefono} variant="destructive lightningButton" label='Borrar' data-index={it.index} class="slds-var-m-left_x-small paddingFields"></lightning-button>
                        <lightning-button  onclick={onAddTelefono} if:true={it.last} data-index={it.index} class="slds-m-left_x-small paddingFields" label="Nuevo" >
             </lightning-button>
           </div>
          </div>
         </template>

CSS code:

.paddingCajas{
padding: 5px;
margin: 3px;

}

I applied the paddingCajas css class to test if it worked but nothing has change. Could anybody help me? Thanks.

Answer 1

I'd start by adjusting the class attribute slds-p-around_small in each direct div parents of the lightning-input / button elements.

If you need display density aware sizing slds-var-p-around_small, then look at the Variable Density Classes: https://www.lightningdesignsystem.com/utilities/padding/#Variable-Density-Classes

Class Name	Comfy Value	Compact Value
slds-var-p-around_xxx-small	0.125rem	0.125rem
slds-var-p-around_xx-small	0.25rem	0.125rem
slds-var-p-around_x-small	0.5rem	0.125rem
slds-var-p-around_small	0.75rem	0.25rem
slds-var-p-around_medium	1rem	0.5rem
slds-var-p-around_large	1.5rem	0.75rem
slds-var-p-around_x-large	2rem	1rem
slds-var-p-around_xx-large	3rem	1.5rem