How to remove tab-bar padding?


How can I remove paddings from start and end of ion-tab-bar?



  <ion-tab-bar class="myTabs" slot="bottom">
    <ion-tab-button tab="groups">
      <ion-icon name="chatbubbles-outline"></ion-icon>
    <ion-tab-button tab="settings">
      <ion-icon name="settings-outline"></ion-icon>


.myTabs {
    --background: #f1c40f;

.tab-has-label {
    --background: none;
    --color-selected: #2c3e50;
    --color: #718093;

.tab-selected {
    --background: #e1b12c;

Any idea?

nobody has solution?

Have you tried to remove the padding from the button? That should be the case.

    --padding-start: 0px;
    --padding-end: 0px;

Unfortunately that doesn’t work.

Came here to find a solution, so thought I would share my finding.
If you inspect you won’t find any padding, in my case it was related to a defined max-width.

Added the following css fixed the issue:

    ion-tab-button {
        max-width: inherit;
1 Like

oh… it saves my life.
thank you !!