减小底部边框宽度答案

【问题标题】：Reduce the bottom border width减小底部边框宽度
【发布时间】：2021-06-10 03:46:36
【问题描述】：

我有两个标签，它们有底部边框。这是jsfiddle 示例。

<div class="component-content">
    <div class="tabs-inner">
        <ul class="tabs-heading">
            <li tabindex="0" class="active">
                <div>
                    <div class="row">
                        <div class="component content col-12">
                            <div class="component-content">
                                <div class="field-heading">TAB 1: STANDARD SMALL</div>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li tabindex="-1">
                <div>
                    <div class="row">
                        <div class="component content col-12">
                            <div class="component-content">
                                <div class="field-heading">TAB 2: STANDARD SMALL</div>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>

.tabs-heading {
    display: table;
    table-layout: fixed;   
    width:100%;
}
.tabs-heading li {
    display: table-cell;
    border-bottom: 2px solid red;
}

我想在边框底部添加填充，使其看起来像这样

我尝试添加 padding-bottom 但没有成功。

任何建议或帮助将不胜感激

【问题讨论】：

你在哪里添加padding-bottom？
我试过了，还有margin-bottom，但没有用
检查这个：stackoverflow.com/questions/16398823/…
嗨@OwaisAhmed，我可以看到，您已在JSFiddle example 中的line 9 上将height:100px 添加到包装器div。即使你减少填充它也无济于事。要么你必须降低你的身高，要么通过给padding来管理身高。希望这对你有用。或者如果可能，请提供更多见解，以便我们能够更深入地了解它。

标签： css sass border padding

【解决方案1】：

我不太确定你的问题是否正确......但也许你正在寻找这样的东西......？

如果您不使用table 和table-cell ...而是使用flexbox ...所有选项卡将自动获得相同的高度，并且您可以使用padding-bottom。如果你喜欢，你也可以在标签之间添加margins。

#wrapper {
    display: flex;
    align-items: stretch;
    background-color: Gray;
}

#wrapper div {
    padding-bottom: 10px;
    border-bottom: 2px solid orange;
}

#one {
    background-color: green
}

#two {
    background-color: blue
}

#three {
    background-color: red

<div id="wrapper">
    <div id="one">one one one one one one one one one one one one one one one one one one one one one</div>
    <div id="two">two two two two two two</div>
    <div id="three">three</div>
</div>

【讨论】：