CSS边距会影响有效的href

Question

我有一个div，我需要将其距其上方元素底部的距离为30px。当我这样做时，光标将不再起作用，而只会在div的边缘上起作用。我已经尝试了position：absolute和top：30px，结果还是一样。我无法弄清楚如何将所有div当光标移到并定位它时都处于活动状态。有帮助吗？

.headernavbuttons {
  margin-top: 30px;
  background-color: #861622;
  cursor: pointer;
  width: 200px;
  padding: 10px 10px 10px 10px;
  text-align: center;
  float: right;
  border-radius: 10px;
  transition: 0.3s;
  color: #FFFFFF;
  text-transform: uppercase;
  text-decoration: none;
  text-decoration: none;
  font-family: Poppins;
  font-weight: bold
}

.headernavbuttons:hover {
  background-color: hsla(14, 45%, 15%, 1.00);
  color: #FFFFFF;
  font-size: 15px
}

<div class=headernavbuttons onclick="location.href='https://tcokchallenge.com/launch2/inquire-now/'">inquire now</div>

Answer 1

您的<div>具有边界半径，即圆角。使角变圆会减小<div>的面积。要使该修剪区域可点击，请将<div>包裹在另一个<div>中，然后将点击监听器移到外部<div>上，然后按以下方式修改CSS：

.wrapper {
  margin-top: 30px;
  cursor: pointer;
  float: right;
}

.headernavbuttons {
  background-color: #861622;
  width: 200px;
  padding: 10px 10px 10px 10px;
  text-align: center;
  border-radius: 10px;
  transition: 0.3s;
  color: #FFFFFF;
  text-transform: uppercase;
  text-decoration: none;
  text-decoration: none;
  font-family: Poppins;
  font-weight: bold
}

.wrapper:hover .headernavbuttons {
  background-color: hsla(14, 45%, 15%, 1.00);
  color: #FFFFFF;
  font-size: 15px
}

<div class="wrapper" onclick="location.href='https://tcokchallenge.com/launch2/inquire-now/'">
  <div class="headernavbuttons">inquire now</div>
</div>