如何在不修改元素内容的情况下调整元素大小。 css

Question

我在我的项目中加入了一个新的 CSS 库，其中包含按钮设计。我想改变这个按钮的高度：

但是当我使用高 css 属性时，会发生以下情况：

行高适当后：

代码：

<button class="btn btn-4 btn-4c icon-arrow-right" ><label>button</label></button>

来源：source

如何调整大小？

感谢您的帮助！

Answer 1

尝试使用 line-height 属性

例如：line-height: 0.5

<button class="btn btn-4 btn-4c icon-arrow-right" style="line-height:5" ><label>button</label></button>

在此 class 中也调整行高。

.btn-4:before {
position: absolute;
height: 100%;
font-size: 125%;
line-height: 6.5; //Adjust this
color: #fff;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;

}

Answer 2

我们需要更多详细信息，例如您正在使用哪个 CSS 库或 CSS 所有这些类的代码（btn btn-4 btn-4c icon-arrow-right) 在按钮上使用，以帮助您解决问题。

Answer 3

这是动画版:) https://jsfiddle.net/ahe128/evedzdbk/1/ 您的请求是以下样式代码:)

#button{
  width:200px;
  height:50px;
border-radius:5rem;
  background:#2390fd;
  margin:5%;
  position:absolute;
   display:table;
   transition:.5s;
}
span{
 font-size:15px;
  font-weight:600;
 display:table-cell;
  vertical-align:middle;
  text-align:center;
  color:white;
  font-family:sans-serif;
}

我希望这对你有用:)

如何在不修改元素内容的情况下调整元素大小。 css

how resize an element without modifying its content. css

css

resize