css - "Button:active"移动所有按钮而不是只点击按钮

Question

我知道这与边距的碰撞或布局有关，但我无法完全弄清楚。我的目标是将点击的 (div) 按钮移动 5 个像素。我目前的做法是将 :active margin-top 设置为 5。

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

CSS:

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
    }
}

HTML

<?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>

Answer 1

根据我的评论进一步解释:当您使用页边距时，您实际上会影响文档流，这会导致整个页面重排和重新布局。

如果你想保留文档流但要左右移动按钮，你应该考虑使用相对定位，即 position: relative;顶部:-5px;.

ps:默认为position: static。