CODEWITHSUNDEEP
css
Roy J
Roy J

Reputation: 43881

Placement of button-styled div different from placement of button

In the snippet below, I've got a button-bar widget that should allow buttons and non-buttons to be children. However, the non-button option (Option 3) is offset by a vertical pixel relative to the others.

What's going on?

(The CSS included has some redundant/overriding entries because it was generated from SASS.)

.button-bar {
    border: 0.1rem solid #d5d5d5;
    align-items: baseline;
    border-radius: 0.2rem;
    display: inline-flex;
    height: 5rem;
    padding: 0;
}

.button-bar > *:not(:last-child) {
    border-right: thin solid #d5d5d5;
}

.button-bar > * {
    align-items: center;
    display: flex;
    justify-content: center;
    text-align: center;
    font-size: 1.6rem;
    line-height: 2.5rem;
    letter-spacing: normal;
    font-weight: normal;
    border: 0.1rem solid #d5d5d5;
    border-radius: 0.2rem;
    color: #424242;
    font-weight: normal;
    background-color: #f1f1f1;
    box-sizing: border-box;
    cursor: default;
    height: 5rem;
    margin: 0.5rem;
    padding: 0 3rem;
    text-decoration: none;
    user-select: none;
    width: auto;
    background-color: #fff;
    border: 0;
    color: #5e6062;
    height: 100%;
    margin: 0;
    max-height: 100%;
    white-space: nowrap;
}


.button-bar > *:focus {
    z-index: 1;
}
<div class="button-bar">
    <button>Option 1</button>
    <button aria-selected="true">Option 2</button>
    <div class="btn" tabindex="0">Option 3</div>
    <input type="button" value="Option 4">
</div>

Upvotes: 0

Views: 21

Answers (1)

cnrhgn
cnrhgn

Reputation: 703

Your font is different for the div in button-bar.

Try adding font-family: initial; to .button-bar > *.

Upvotes: 1

Related Questions