如何用CSS降低按鈕的高度？

Question

我是新來的CSS。我有以下樣式的標籤按鈕。如何減少按鈕的高度？我試圖改變它，但它沒有幫助。

我的代碼：

.tag-btn { 
    font-size: 10px; 
    text-transform: uppercase; 
    font-weight: bold; 
    color: #fff; 
    cursor: pointer; 
    z-index: 5; 
    position: relative; 
    padding: 10px; 
    line-height: 13px; 
    margin: 0; 
    height: 40px; 
    -webkit-transition: all 0.2s ease-in-out; 
    -moz-transition: all 0.2s ease-in-out; 
    -o-transition: all 0.2s ease-in-out; 
    -ms-transition: all 0.2s ease-in-out; 
    transition: all 0.2s ease-in-out; 
    background-color: #F08080; 
    border: none; 
    color: #fff; 
    box-shadow: none; 
} 

誰能幫我在這？謝謝。

Answer 1

完全取出height，並嘗試調整line-height

.tag-btn { 
    font-size: 10px; 
    text-transform: uppercase; 
    font-weight: bold; 
    color: #fff; 
    cursor: pointer; 
    z-index: 5; 
    position: relative; 
    padding: 10px; 
    margin: 0; 
    line-height: 5px; 
    -webkit-transition: all 0.2s ease-in-out; 
    -moz-transition: all 0.2s ease-in-out; 
    -o-transition: all 0.2s ease-in-out; 
    -ms-transition: all 0.2s ease-in-out; 
    transition: all 0.2s ease-in-out; 
    background-color: #F08080; 
    border: none; 
    color: #fff; 
    box-shadow: none; 
} 

DEMO

Answer 2

減少高度以及填充並移除線條高度。

.tag-btn { 
font-size: 10px; 
text-transform: uppercase; 
font-weight: bold; 
color: #fff; 
cursor: pointer; 
z-index: 5; 
position: relative; 
padding:3px;  
margin: 0; 
height: 20px; 
-webkit-transition: all 0.2s ease-in-out; 
-moz-transition: all 0.2s ease-in-out; 
-o-transition: all 0.2s ease-in-out; 
-ms-transition: all 0.2s ease-in-out; 
transition: all 0.2s ease-in-out; 
background-color: #F08080; 
border: none; 
color: #fff; 
box-shadow: none; 
} 

DEMO

Answer 3

可以調整line-height和height

CSS

.tag-btn { 
    font-size: 10px; 
    text-transform: uppercase; 
    font-weight: bold; 
    color: #fff; 
    cursor: pointer; 
    z-index: 5; 
    position: relative; 
    padding: 10px; 
    line-height: 0px; 
    margin: 0; 
    height: 22px; 
    -webkit-transition: all 0.2s ease-in-out; 
    -moz-transition: all 0.2s ease-in-out; 
    -o-transition: all 0.2s ease-in-out; 
    -ms-transition: all 0.2s ease-in-out; 
    transition: all 0.2s ease-in-out; 
    background-color: #F08080; 
    border: none; 
    color: #fff; 
    box-shadow: none; 
} 

DEMO HERE

Answer 4

你需要從你的CSS刪除line-height和padding。此後，您可以操縱高度。

Answer 5

減少填充和行高以降低高度

而且閱讀框模型CSS瞭解更多

https://css-tricks.com/the-css-box-model/

Answer 6

您.TAG-BTN是一個內聯元素，你可以改變填充或線高來改變btn的高度，如果你想直接改變高度，你可以將元素改爲內聯塊

.tag-btn { 
    padding: 5px 10px; //your code is 10px 

}

Answer 7

減少「填充」CSS屬性。讓它成爲一個像素，然後嘗試。

padding: 1px; 

Answer 8

你的。標籤BTN是一個內聯元素

• 你可以改變填充
• 你可以改變行高
• 您可以更改元素inline-block的，如果您想直接改變高度

各方面會爲你工作