按鈕等於填充不分配同樣

嗨我只是具有應用等於填充到一個按鈕，一個小問題，我採用以下方式把它：按鈕等於填充不分配同樣

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

現在因爲上面的簡化版，工作，我不得不使用一劈和從按鈕的底部填充減少1px的：

.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，所以那爲什麼：

`0.5em` padding is not equally distributed ??

P.S.要重新創建錯誤，請將按鈕中的樣式更改爲padding:0.5em 2em。

填充差異（我用尺子直觀地顯示了填充分佈的差異）。

填充上面：

下面填充：

我已經很多次了這個問題，但從來沒有找到一個解決辦法，所以我教我會發布這是爲了知道爲什麼會發生這種情況。

LINK TO SITE

謝謝。

來源

2016-06-26 Alexander Solonik

您可以嘗試應用頂部，右側，底部和左側填充。在那裏保持你的頂部和左邊的填充值比較底部和右邊。 – frnt

我們在談論不在中心的實際字體字符嗎？ – LGSon

@LGSon是的，absoluty :) –

-2

嗨，你可以請嘗試行高：在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; 
}

來源

2016-06-26 09:00:48 user3185602

這不能彌補不均勻的字體字符高度及其內部字形大小 – LGSon

-1

這可能是因爲css的line-height屬性。如果您從開發人員工具中看到computed values（開發人員工具的樣式選項卡末尾有可視化表示），則padding-top和bottom都是相同的。但是您注意到的差異並未考慮文本的line-height。如果您將鼠標懸停在開發人員工具的元素上，則會看到圍繞文本的框在文本下方有一些空格。瀏覽器在應用填充時將此視爲文本的一部分，並僅在此框中應用填充。

來源

2016-06-26 09:01:35 a1626

這不能彌補不均勻的字體字符高度及其內部字形大小 – LGSon

按鈕等於填充不分配同樣

回答

相關問題