The first tab element is displaced vertically

[micobarac]

This is about Bulma.

Overview of the problem

This is about the Bulma CSS framework.

I am using the latest Bulma version.

Description

The first tab element is displaced vertically a few pixels, forming a small gap from the bottom border. This problem is almost 2 years old, but wasn't fixed along the way.

#474

Steps to Reproduce

I am facing the this issue on Windows 10 x64 with the latest Chrome version.

<section class="section content">
  <div class="container is-fluid">
    <h1 class="title">Dashboard</h1>
    <div class="tabs">
      <ul>
        <li class="is-active"><a>Pictures</a></li>
        <li><a>Music</a></li>
        <li><a>Videos</a></li>
        <li><a>Documents</a></li>
      </ul>
    </div>
  </div>
</section>

Aligning items to the baseline did the trick.

.tabs ul { align-items: baseline; ... }

Expected behavior

All tabs should be aligned vetically.

Actual behavior

The first tab is displaced.

[tulsileathers]

I can confirm I'm seeing the same problem

[mobayen]

same here
this style causes

.content li + li {
    margin-top: 0.25em;
}

either removeing it or lose the "+ li" part will solve the issue

[MikelisB]

If it helps resolving it - same to me and the fix by OP did the trick. Thanks! :)
EDIT
Just realised it happends with pagination to me too. Same fix though.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[logological]

The issue appears to have been fixed in Bulma 0.7.5. (I can reproduce it with Bulma 0.7.4, but not Bulma 0.7.5.) I think this issue can be closed now.