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

Question

This is my link code: 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>

. I tried to remove it by padding and margin but it don't working

Answer 1

Add vertical-align:top; to .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/

OR

Add vertical-align:top; to .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/