所以，我正在重制一款垂死的在线游戏，我需要一些代码方面的帮助。
.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;
}
这是与 CSS 代码关联的 HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Game Intro</title>
<link rel="stylesheet" href="styles.css"> <!-- Link to the styles.css file -->
</head>
<body>
<!-- Logo that will zoom in -->
<div id="logo-container">
<img id="game-logo" src="/svgs/old login page stuf/shapes/299.svg" alt="Game Logo"> <!-- Replace with your logo SVG -->
<img id="game-logo2" src="/svgs/old login page stuf/shapes/299 copy.svg" alt="Game Logo">
</div>
<!-- New Player and Returning Player buttons that will zoom in after the logo -->
<div id="player-selection">
<div id="newPlayerButton">
New Player
</div>
<div id="returningPlayerButton">
Returning Player
</div>
</div>
<!-- JavaScript to control animations -->
<script src="app.js"></script>
</body>
</html>
当我更改边距时会发生以下情况：
原文：
.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;
}
如您所见，margin-top 设置为 50px。这是运行时发生的情况：
当它是 100px 时...
没什么。
无论我如何改变顶部边距，它都不会离开徽标。我该如何解决这个问题？
.player-selection<div id="player-selection">player-selection您可以：
.player-selection {...}#player-selection {...}<div id="player-selection"><div class="player-selection">