Мне нужна помощь в увеличении расстояния между логотипом и кнопками входа/регистрации. ⇐ CSS

[Anonymous]

Итак, я переделываю умирающую онлайн-игру, и мне нужна помощь с небольшим количеством моего кода.

Код: Выделить всё

.player-selection {
display: flex;
justify-content: center;
align-items: center;
gap: 50px; /* Space between the buttons */
margin-top: 100px;
width: 100%;
}

#newPlayerButton, #returningPlayerButton {
height: 100px;
display: inline-block;
text-align: center;
line-height: 150px;
font-size: 16px;

/* Initially hide the buttons */
opacity: 0;
transform: scale(0);
transition: transform 1s ease-in-out, opacity 1s ease-in-out;
}

Вот HTML-код, связанный с кодом CSS:

Код: Выделить всё

Game Intro
 





[img]/svgs/old login page stuf/shapes/299.svg[/img]
 
[img]/svgs/old login page stuf/shapes/299 copy.svg[/img]




New Player

Returning Player

И вот что происходит, когда я меняю поле:
исходное:

Код: Выделить всё

.player-selection {
display: flex;
justify-content: center;
align-items: center;
gap: 50px; /* Space between the buttons */
margin-top: 50px; /* Adjust this value to create space between the logo and buttons */
width: 100%;
}

#newPlayerButton, #returningPlayerButton {
height: 100px;
display: inline-block;
text-align: center;
line-height: 150px;
font-size: 16px;

/* Initially hide the buttons */
opacity: 0;
transform: scale(0);
transition: transform 1s ease-in-out, opacity 1s ease-in-out;
}

Как видите, для поля установлено значение 50 пикселей. Вот что происходит при запуске:
введите сюда описание изображения
И когда его размер 100 пикселей...
введите здесь описание изображения
ничего.
Сколько бы я ни менял верхний край поля, он не отходит от логотипа. Как это исправить?

Подробнее здесь: https://stackoverflow.com/questions/790 ... er-buttons