function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Connor CainConnor Cain 

Salesforce Lightning Web Component remove Space in Tab

How do I remove the bit of space inbetween the tab and its content in our Lightning Web Component?
User-added image
Raj VakatiRaj Vakati
You can override it with CSS .. Can you create a new .css file in LWC and override the styles 
Ramesh DRamesh D
Add this to your style and increase padding as you wish 
.THIS .slds-tabs_default__item, .THIS .slds-tabs--default__item{
    padding:1px;
}
Result: 
User-added image


I hope you find the above solution helpful. If it does mark as best answer to help others too.
Thanks,
Ramesh D
Evelyn Grizzle 9Evelyn Grizzle 9

Hello! I ran into the same issue, and figured out that you can do this without modifying the CSS by adding in slds-p-top_none (https://www.lightningdesignsystem.com/utilities/padding/):

 

<lightning-tabset>
    <lightning-tab label="Label" class="slds-p-top_none">
    ...
    </lightning-tab>
</lightning-tabset>