如何使用 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

降低高度和内边距并移除行高。

.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 2

您可以调整 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 3

完全删除 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 4

您需要从 CSS 中删除 line-height 和 padding。此后，您可以操纵高度。

Answer 5

减少 padding 和 line-height 以降低高度

另请阅读 css 中的盒子模型以了解更多信息

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

Answer 6

你的.tag-btn是一个inline-element，你可以改变padding或者line-height来改变btn的高度，如果你想直接改变高度，你可以把元素改成inline-block

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

}

Answer 7

减少 "padding" css 属性。让它成为一个像素并尝试。

padding: 1px;

Answer 8

你的 .tag-btn 是一个内联元素

您可以更改填充
你可以改变行高
如果你想直接改变高度，你可以把元素改成inline-block

每种方式都适合你

如何使用 CSS 降低按钮的高度？

How to reduce the height of a button with CSS?

html

css

button