PHP, а l oop создает пространство между кнопками

Question

Я пытаюсь использовать некоторое время l oop для динамического создания кнопок на основе числа outcomeId, но когда я пытаюсь создать кнопки с помощью l oop, это создает промежутки между кнопками.

<div class="outcomes">
        <?php
        //echo "<button class=\"outcomebtn\">Outcome A</button>";
        //echo "<button class=\"outcomebtn\">Outcome B</button>";
        $arrayLength = count($_SESSION['outcomeId']);
        $i = 0;
        while ($i < $arrayLength){
            $num = $_SESSION['outcomeId'][$i];
            echo "<button class=\"outcomebtn\">Outcome $num</button>";
            $i = $i + 1;
        }
        ?>
</div>

Когда я включаю закомментированные кнопки, между кнопками нет никаких промежутков. Это происходит только тогда, когда я закомментирую кнопки, которые не включены в l oop. Ниже приведена веб-страница (1), включающая прокомментированные кнопки (2) только с использованием кнопок из l oop:

изменить: вот мой. css

.outcomes{
  display: grid;
  grid-template-columns:  1fr;
  width: 100%;
  height: 200px;
}
.outcomebtn{
  font-size: 20pt;
  color: rgba(10, 99, 231, 0.829);
  text-align: left;
  font-size: 20px;
  height: 65px;
  background-color: transparent;
  border-color: 2px lightgray;
}

Answer 1

Воспроизведение проблемы

Проблема воспроизводится только тогда, когда на странице ровно 2 кнопки:

.outcomes {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  height: 200px;
}

.outcomebtn {
  font-size: 20pt;
  color: rgba(10, 99, 231, 0.829);
  text-align: left;
  font-size: 20px;
  height: 65px;
  background-color: transparent;
  border-color: 2px lightgray;
}

<div class="outcomes">
  <button class="outcomebtn">Outcome 1</button>
  <button class="outcomebtn">Outcome 2</button>
</div>

Причина

Проблема возникает из-за того, что класс .outcomes зафиксировал height в 200px.

Возможно решение

Одним из возможных решений является избавление от этой height css -преимущества в классе .outcomes вообще:

.outcomes {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
}

.outcomebtn {
  font-size: 20pt;
  color: rgba(10, 99, 231, 0.829);
  text-align: left;
  font-size: 20px;
  height: 65px;
  background-color: transparent;
  border-color: 2px lightgray;
}

<div class="outcomes">
  <button class="outcomebtn">Outcome 1</button>
  <button class="outcomebtn">Outcome 2</button>
</div>

Answer 2

Я обнаружил, что проблема была в том, что у моего CSS была ненужная переменная высоты в классе результатов. Как только я удалил это, это было исправлено.