如何删除“+”和“-”两个按钮上方的space？

Question

这是我的 link 代码： https://jsfiddle.net/robocon321/Lnw198jp/9

<div class="change-button">
  <button class="increase">+</button>
  <input type="text" class="result" disabled="false" value="0"/>
  <button class="decrease">-</button>
</div>

。我试图通过填充和边距删除它，但它不起作用

Answer 1

将 vertical-align:top; 添加到 .decrease & .increase

.increase{
  height: 100px;
  vertical-align:top;
  width: 100px;
  font-size: 25px;
  background-color: rgb(221, 221, 221);
}

.decrease{
  height: 100px;
  width: 100px;
  vertical-align:top;
  font-size: 25px;
  background-color: rgb(221, 221, 221);
}

https://jsfiddle.net/lalji1051/dn9j742s/1/

或

将 vertical-align:top; 添加到 .result

.result{
  text-align:center;
  height: 100px;
  width: 100px;
  vertical-align:top;
  font-size: 45px;
  background-color: black;
  color: white;
}

https://jsfiddle.net/lalji1051/dn9j742s/4/

Answer 2

将 .result 的字体大小设置为 25px 而不是 45px，因为您的字体大小会影响。或者只需将 display: flex; align-content: flex-start; 添加到 class .change-button

Answer 3

尝试使用 change-button class

中的 display: flex

body{
  font-size:0px;
}
*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  border:0px solid black;
}

.increase{
  height: 100px;
  width: 100px;
  font-size: 25px;
  background-color: rgb(221, 221, 221);
}

.decrease{
  height: 100px;
  width: 100px;
  font-size: 25px;
  background-color: rgb(221, 221, 221);
}
.change-button
{
  display: flex;
  align-items: center;
}
.result{
  text-align:center;
  height: 100px;
  width: 100px;
  font-size: 45px;
  background-color: black;
  color: white;
}

<div class="change-button">
  <button class="increase">+</button>
  <input type="text" class="result" disabled="false" value="0"/>
  <button class="decrease">-</button>
</div>

Answer 4

将 css 交给更改按钮 class -

.change-button {
display: flex;
align-items: center;

}

Answer 5

只需添加 float: left;对于 .increase 和 .result 类

body{
  font-size:0px;
}
*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  border:0px solid black;
}

.increase{
  float: left;
  height: 100px;
  width: 100px;
  font-size: 25px;
  background-color: rgb(221, 221, 221);
}

.decrease{
  height: 100px;
  width: 100px;
  font-size: 25px;
  background-color: rgb(221, 221, 221);
}

.result{
  text-align:center;
  height: 100px;
  width: 100px;
  float: left;
  font-size: 45px;
  background-color: black;
  color: white;
}

<div class="change-button">
  <button class="increase">+</button>
  <input type="text" class="result" disabled="false" value="0"/>
  <button class="decrease">-</button>
</div>

这是它的工作https://jsfiddle.net/chandirasekaranid/60afmszx/3/

如何删除“+”和“-”两个按钮上方的space？

How to remove space above two buttons '+' and '-'?

html

css

space