为何选中状态的Tab按钮在空间充足时仍超出容器div？

问题描述 #

我尝试给div顶部制作标签页，希望带有.selected类的Tab按钮比其他按钮更高，但选中的按钮却超出了容器div，而非利用现有空间——我确认容器高度与按钮包含内边距、外边距的高度一致。

现有代码 #

CSS #

.tabContainer {
    padding: 0;
    padding-left: 10px;
    margin-bottom: 0;
    height: 35px;
}

.tab {
    border: 0;
    background: #88B7B5;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding: 6px;
    font-size: 15px;
    height: 30px;
    margin-top: 5px;
    margin-bottom: 0px;
}

.tab.selected {
    height: 35px;
    margin-top: 0px !important;
    transition: height 0.2s, margin-top 0.2s;
}

.tab:hover {
    background: #98cdca;
    transition: background 0.2s;
}

.tabContentsContainer { margin-top: 0; }

.tabContents {
    padding: 10px;
    background: #A7CAB1;
    border-radius: 10px;
}

HTML #

<div class="tabContainer">
    <button class="tab selected" data-tabgroup="main" data-tab="inventory">Inventory</button>
    <button class="tab" data-tabgroup="main" data-tab="location">Location</button>
    <button class="tab locked" data-tabgroup="main" data-tab="research">???</button>
    <button class="tab locked" data-tabgroup="main" data-tab="recruits">???</button>
    <button class="tab locked" data-tabgroup="main" data-tab="training">???</button>
</div>
<div class="tabContentsContainer">
    <div class="tabContents" data-tabgroup="main" data-tab="inventory">
        <h1>Inventory</h1>
    </div>
</div>

问题截图 #

解决方案 #

问题根源是默认盒模型的计算逻辑：按钮默认使用content-box，设置的height仅指代内容区高度，加上padding后，按钮实际总高度会超出设定数值，导致溢出容器。

只需给.tab添加box-sizing: border-box;，让设置的height包含内边距，同时可以去掉.tab.selected里没必要的!important：

.tab {
    border: 0;
    background: #88B7B5;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding: 6px;
    font-size: 15px;
    height: 30px;
    margin-top: 5px;
    margin-bottom: 0px;
    box-sizing: border-box; /* 新增：让height包含padding */
}

.tab.selected {
    height: 35px;
    margin-top: 0px;
    transition: height 0.2s, margin-top 0.2s;
}

调整后，未选中按钮的总高度（含padding）为30px，加上5px的margin-top刚好贴合容器的35px高度；选中按钮的总高度（含padding）为35px，margin-top设为0后会完全填充容器，不会出现溢出问题。

内容的提问来源于stack exchange，提问作者SnekNoob