Padding tab of the single page of a plugin

[Marc4]

What is the problem?

When accessing an individual page of a plugin, if you hover your mouse over the active tab you will see that the page content is offset by 2px the page content below the tabs.

How to solve it?

In styles that affect tabs, you must replace border-bottom: 0; for border-bottom-color: transparent; and remove padding-bottom: 2px;

This works correctly, without showing border below the active tab and the content will not be scrolled.

If I'm not wrong it would be like this:

.type-plugin span#advanced.displayed ~ #section-links .tabs li#tablink-advanced,
.type-plugin span#developers:target ~ #section-links .tabs li#tablink-developers,
.type-plugin span#installation:target ~ #section-links .tabs li#tablink-installation,
.type-plugin span#reviews:not(:target) ~ span#installation:not(:target) ~ span#developers:not(:target) ~ span#advanced:not(.displayed) ~ #section-links .tabs li#tablink-description,
.type-plugin span#reviews:target ~ #section-links .tabs li#tablink-reviews {
  background: #fff;
  border: 2px solid #eee;
  border-bottom-color: transparent;
}

[dd32]

@Marc4 What OS+browser combination are you testing with?

I can see the padding, but it doesn't appear to be affecting the page layout, it appears the padding is counteracted by a negative margin:

.type-plugin .tabs li {
    margin-bottom: -2px;

[Marc4]

@dd32 On my side it seems not to be counteracted. I'm testing this on Win 10 + Chrome 114.0.5735.110, on Win 10 + Firefox 114.0.1 and on Win 10 + Edge 114.0.1823.43.

Thanks

[dd32]

Replying to Marc4:

On my side it seems not to be counteracted. I'm testing this on Win 10

Thanks @Marc4, I'll test it on a Windows instance!