Css &引用；按钮：激活"；移动所有按钮，而不是仅单击按钮

我知道这与边距的碰撞或布局有关，但我不能完全弄清楚。我的目标是将单击的（div）按钮移动5像素。目前我这样做的方法是：将：active margin top设置为5

我也不知道如何让所有的按钮占据整个屏幕空间。使用100%或100vh会产生太多空间

CSS:

HTML

测验
Lorem ipsum dolor sit amet，是一位杰出的献身者。
选择1
选择2
选择3
选择4

从我的评论中进一步解释一下：当您使用边距时，实际上会影响文档流，从而导致整个页面回流并重新显示

如果您想保留文档流，但要按下按钮，则应该考虑使用相对定位，即<代码>位置：相对；顶部：-5px

---

ps：默认值为

位置：静态

使用边距将导致文档回流。您需要的是

位置：相对；顶部：-5px谢谢，这就成功了。我以前试过这样做，但分开做，结果不起作用。
body{
  margin: 0;
  padding: 0;
  font-family: Sans-Serif;
  -webkit-animation: bgcolor 20s infinite;
  animation: bgcolor 10s infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

header{
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  text-align: center;
  font-size: 25px;
}

.container{
  padding: 10px;
  margin: 0 auto;
  text-align: center;
}

.question{
  font-size: 35px;
  margin: 10px;
  font-weight: bold;
  color: white;
}

.buttons-container{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  height: 100%;
}

.button{
  padding: 25px;
  background-color: green;
  color: white;
  font-size: 25px;
  box-shadow: 0px 5px 0px #504f4f;
}

.button:active{
  box-shadow: none;
  margin-top: 5px;
}


@keyframes bgcolor {
    0% {
        background-color: #45a3e5
    }

    30% {
        background-color: #66bf39
    }

    60% {
        background-color: #eb670f
    }

    90% {
        background-color: #f35
    }

    100% {
        background-color: #864cbf
    }
}

<?php
 include 'header.php';
?>
<div class="wrapper">

 <header>
   Quiz
 </header>

 <div class="container">
   <div class="question">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   </div>
   <div class="buttons-container">
     <div class="button">
       Opt 1
     </div>

     <div class="button">
       Opt 2
     </div>

     <div class="button">
       Opt 3
     </div>

     <div class="button">
       Opt 4
     </div>
   </div>

 </div>

</div>


</body>
</html>