ボタンの配置とは異なるボタンスタイルのdivの配置

Question

以下のスニペットでは、ボタンと非ボタンを子にするためのボタンバーウィジェットがあります。しかし、非ボタンオプション（オプション3）は、他のものに対して垂直ピクセルによってオフセットされています。

何が起こっているのですか？

（CSSはそれが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>

Answer 1

あなたのフォントがbutton-barでのdivのために異なっています。

font-family: initial;~.button-bar > *を追加してみてください。