CSS - 文本鏈接大於按鈕

Question

我在頁面上有一個輸入樣式，有一些基本的填充和字體大小，我嘗試將相同樣式應用於鏈接，但出於某種原因鏈接總是較大（高度）比按鈕，無論我做什麼，即使是完全相同的文字和字體大小，我試着做display: block，但只是使按鈕的屏幕寬度。

這裏是CSS：

.button{ 
    padding: 10px 15px 7px 15px!important; 
    font-size: 16px !important; 
    color: white; 
    cursor: pointer; 
    border-radius: 2px; 
    text-decoration: none; 
} 

.button-3{ 
    background-color: #ff4d4d; 
    border: 1px solid #ff4d4d !important; 
} 

我已經看過了鍍鉻樣式面板，並確認正在使用的字體/填充（它不是通過strikken）。

這裏是什麼樣子：

Answer 1

爲了避免這種東西，我總是設置字體系列我使用。

看看這個例子：https://fiddle.jshell.net/tnr0jxka/

您可能還需要考慮增加：-webkit-外觀：無; -moz-外觀：無;到這種CSS，它將爲您節省大量的時間在跨瀏覽器的經驗。

Answer 2

貌似這個問題是因爲：

• 你沒有使用CSS復位。
• line-height需要相同。

請確保您對兩者都提供一致的line-height。現在，在兩者中設置：

line-height: 1.5; 

這應該解決它。另外，您可以將兩種樣式與計算的樣式進行比較，以檢查是否還有其他設置。既然你說<button>，它可能也有一些border。

另外，就像我猜測的那樣，你也給border和同樣的顏色作爲按鈕的背景，使它看起來更大一點2px。

當您打開了開發工具，嘗試比較計算樣式部分：