均等

Question

を配布していないボタンに等しいパディングちょっと私はちょうどボタンに等しいパディングを適用すると、小さな問題を抱えていた男が、私はそれに次のスタイルを適用：今

.btn-request-more-info { 
    background: #fff; 
    color: #6e2c91; 
    font-size: 18px; 
    padding: 0.5 2.5em; 
    border: 1px solid #fff; 
    font-weight: 900; 
    text-transform: uppercase; 
    border-radius: 10px; 
    border: 1px solid #fff; 
    -webkit-transition: all .3s; 
    -o-transition: all .3s; 
    transition: all .3s; 
} 

上記does't作業以来、

.btn-request-more-info { 
    background: #fff; 
    color: #6e2c91; 
    font-size: 18px; 
    padding: 10px 2.5em 9px; 
    border: 1px solid #fff; 
    font-weight: 900; 
    text-transform: uppercase; 
    border-radius: 10px; 
    border: 1px solid #fff; 
    -webkit-transition: all .3s; 
    -o-transition: all .3s; 
    transition: all .3s; 
} 

10pxの上方および下方9px、なぜそれはつまり：：、私はハックを使用すると、ボタンの下パディングから1ピクセルを削減しなければならなかった

`0.5em` padding is not equally distributed ?? 

P.S.エラーを再現するには、ボタンのスタイルをpadding:0.5em 2emに変更します。

パッディングの違い（パッディング分布の違いを視覚的に示すためにルーラーを使用しています）。私は何度も前にこの問題を抱えていたが、解決策を見つけたことがないので、私は投稿したい教えた

：以下

パディング：上記

パディングそれがなぜ起こっているのかを知るためにそれをSOに伝えます。

LINK TO SITE

ありがとうございます。

Answer 1

こんにちは、行の高さを試してください：ボタンのCSSの通常のプロパティ。

.btn-request-more-info { 
    background: #fff; 
    color: #6e2c91; 
    font-size: 18px; 
    padding: 10px 2.5em 10px; 
    border: 1px solid #fff; 
    font-weight: 900; 
    text-transform: uppercase; 
    border-radius: 10px; 
    border: 1px solid #fff; 
    line-height:normal; 
    -webkit-transition: all .3s; 
    -o-transition: all .3s; 
    transition: all .3s; 
} 

Answer 2

これは、CSSのline-heightプロパティが原因である可能性があります。デベロッパーツールのcomputed values（開発ツールのスタイルタブの最後に視覚的な表示があります）が表示されている場合はpadding-topとbottomの両方が同じです。しかし、あなたが気づいた違いは、テキストのline-heightを考慮していません。開発者ツールの要素にマウスを合わせると、テキストの周囲にテキストの下にスペースがあることがわかります。パディングを適用しているブラウザは、これをテキストの一部とみなし、このボックスの周囲にのみパディングを適用します。