Как убрать пробел над двумя кнопками «+» и «-»?

Question

Это мой код ссылки: 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

попробуйте использовать display: flex из change-button класс

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 2

Добавить 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 3

Просто добавьте 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/

Answer 4

Предоставить css классу кнопок изменения -

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

}

Answer 5

Установите размер шрифта .result на 25px вместо 45px, потому что размер вашего шрифта влияет. Или просто добавьте display: flex; align-content: flex-start; к классу .change-button