Reduce the bottom border width

Question

I have two tabs and they have bottom-borders. This is the jsfiddle example.

<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;
}

I want to add padding in the border bottom so that it should look like this

I tried to add padding-bottom but it didn't work.

Any suggestion or help would be appreciated

check this: https://stackoverflow.com/questions/16398823/why-is-a-div-with-display-table-cell-not-affected-by-margin/41884720 — Hancel Lin, Mar 12 '21 at 05:30
Hi @OwaisAhmed, I can see, you have added ```height:100px``` to wrapper div on ```line 9``` in ```JSFiddle example```. Even if you reduce the padding it won't help. Either you have to reduce your height, or mange the height by giving ```padding```. Hope this works for you. Or if possible, please give some more insights, so that we would be able to have a deeper look into it. — Himanshu Saxena, Mar 12 '21 at 07:26

score 1 · Accepted Answer · answered Mar 12 '21 at 07:50

I am not quite sure if I got your question right ... but maybe you are looking for something like this ...?

If you don't use table and table-cell ... but flexbox instead ... all tabs will get automatically the same height and you are able to work with padding-bottom. If you like you can add margins between tabs as well.

#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>

Reduce the bottom border width

1 Answers1