时间戳

首页 > 解决方案 > 如何修复影响整行按钮的边距

css - 如何修复影响整行按钮的边距

问题描述

我有几排按钮。我正在努力做到这一点，如果我按下一个按钮，它将获得 5px 的边距，所以它看起来就像被点击了一样。这样做整排按钮也获得了边距，这非常烦人。我该如何解决？

button {
    font-size: 65px;
    font-weight: 800;
    text-shadow: 2px 2px 10px black;
    width: 80px;
    height: 80px;
    border-radius: 20px;
    margin-top: 7.5px;
    margin-bottom: 7.5px;
    margin-left: 7.5px;
    margin-right: 7.5px;
    background-color: rgb(36, 36, 36);
    color: white;
    border: 0;
    cursor: pointer;
    box-shadow: 0px 5px black;
}
button:active {
    margin-top: 12.5px;
    box-shadow: 0px 0px;
}
<button onclick="addText(7)" id="num7">7</button>
<button onclick="addText(8)" id="num8">8</button>
<button onclick="addText(9)" id="num9">9</button>

标签： css

解决方案

为按钮提供 top 的垂直对齐属性，而不是默认的基线：

button {
  font-size: 65px;
  font-weight: 800;
  text-shadow: 2px 2px 10px black;
  width: 80px;
  height: 80px;
  border-radius: 20px;
  margin-top: 7.5px;
  margin-bottom: 7.5px;
  margin-left: 7.5px;
  margin-right: 7.5px;
  background-color: rgb(36, 36, 36);
  color: white;
  border: 0;
  cursor: pointer;
  box-shadow: 0px 5px black;
  vertical-align: top;
}

button:active {
  margin-top: 12.5px;
  box-shadow: 0px 0px;
}
<button id="num7">7</button>
<button id="num8">8</button>
<button id="num9">9</button>

推荐阅读