Tabs with hidden margin: how to solve?

Question

I am trying to implement tabs in our application. I've got a CSS problem where somehow I am adding padding or magin to the right of every tab-item

See my problem in here: JSFiddle

As you can see in the Fiddle, the first tab-item is currently active. However, there is some padding to the right of the item. Because of this padding/margin, the bottom border starts a few pixels too soon.

What am I doing wrong here?

.tabs2 {
  border-bottom: 1px solid red;
}

.tabs2-wrap {
  margin-bottom: -1px;
  position: relative;
}

.tablist {
  transform: translateX(0px);
  border: 1px solid red;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  width: max-content;
}

.tabs2-item {
  padding: 0 20px;
  height: 40px;
  line-height: 40px;
  display: inline-block;
  position: relative;
  border-left: 1px solid red;
  /*    ** Hacky solution **    */
  /* margin-left: -4px; */
}

.tabs2-item:first-child {
  border-left: none;
}

.tabs2-isActive {
  border-bottom: 1px solid #fff;
  color: #409eff;
}

<div class="tabs2">
  <div class="tabs2-wrap">
    <div class="tablist">
      <div class="tabs2-item tabs2-isActive">Algemeen</div>
      <div class="tabs2-item">Vertrouwelijk</div>
      <div class="tabs2-item">Historie</div>
      <div class="tabs2-item">Kaasboer</div>
    </div>
  </div>
</div>

This is a classic stumbling block: The whitespace in your code is being compressed down to a single space between each of your divs, but that one space is affecting your inline elements layout. — DBS, Aug 17 '21 at 14:38

Abdollahzadeh Ghalejoghi · Accepted Answer · 2021-08-17T14:57:47.457

you try with display flex:

But why does this problem occur?

Because the display inline-block considers empty characters and spaces as part of block;

.tabs2 {
  border-bottom: 1px solid red;
}

.tabs2-wrap {
  margin-bottom: -1px;
  position: relative;
}

.tablist {
  transform: translateX(0px);
  border: 1px solid red;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  width: max-content;
  display:flex;
}

.tabs2-item {
  padding: 0 20px;
  height: 40px;
  line-height: 40px;
  display: inline-block;
  position: relative;
  border-left: 1px solid red;
  /*    ** Hacky solution **    */
  /* margin-left: -4px; */
}

.tabs2-item:first-child {
  border-left: none;
}

.tabs2-isActive {
  border-bottom: 1px solid #fff;
  color: #409eff;
}

<div class="tabs2">
  <div class="tabs2-wrap">
    <div class="tablist">
      <div class="tabs2-item tabs2-isActive">Algemeen</div>
      <div class="tabs2-item">Vertrouwelijk</div>
      <div class="tabs2-item">Historie</div>
      <div class="tabs2-item">Kaasboer</div>
    </div>
  </div>
</div>

and other solution: remove white-space from html without flex:

.tabs2 {
  border-bottom: 1px solid red;
}

.tabs2-wrap {
  margin-bottom: -1px;
  position: relative;
}

.tablist {
  transform: translateX(0px);
  border: 1px solid red;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  width: max-content;
  display:flex;
}

.tabs2-item {
  padding: 0 20px;
  height: 40px;
  line-height: 40px;
  display: inline-block;
  position: relative;
  border-left: 1px solid red;
  /*    ** Hacky solution **    */
  /* margin-left: -4px; */
}

.tabs2-item:first-child {
  border-left: none;
}

.tabs2-isActive {
  border-bottom: 1px solid #fff;
  color: #409eff;
}

<div class="tabs2">
  <div class="tabs2-wrap">
    <div class="tablist">
      <div class="tabs2-item tabs2-isActive">Algemeen</div><div class="tabs2-item">Vertrouwelijk</div><div class="tabs2-item">Historie</div><div class="tabs2-item">Kaasboer</div>
    </div>
  </div>
</div>

Though this hack solves the problem but it does not answer why that behavior is seen. Why white space is being added. — Nik, Aug 17 '21 at 14:38
Just to clarify a little, "inline-block considers empty characters and spaces as part of block" is not exactly true. They aren't _part_ of the block, they are just included in the layout **between** the inline elements, which gives the illusion of extra padding in this particular situation. — DBS, Aug 18 '21 at 15:12

score -1 · Answer 2 · answered Aug 17 '21 at 14:39

-1

Looking at your CSS, you have the left and right padding on all tabs2-item elements set to 20px. Then the CSS under the first-child selector turns off the padding to the left of the first tabs2-item element (leaving the padding on the right).

answered Aug 17 '21 at 14:39

Andrew Corrigan

1,017
6
23

Tabs with hidden margin: how to solve?

2 Answers2