链接中的DIV框，希望最大程度地减少链接光标盒区域

Question

我是一个可怕的解释，这就是为什么我提供了我的问题的图像。

手动问题

.body {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  cursor: default;
}
.column1 {
  display: flex;
  flex-direction: column;
}
.boxhunter {
  display: flex;
  padding: 5px;
  flex-direction: column;
  align-items: center;
  width: 180px;
  background-image: radial-gradient(circle at center center, #ABD473 0%, #16150c 120%);
  border: 2px solid black;
  border-radius: 3%;
  margin: 10px;
}
a {
  color: black;
  font-family: Dwarvesc;
  border: 1px dotted red;
  padding: 5px;
}

<div class="body">
  <div class="flex-container">
    <div class="column1">
      <a href="./classes/druid/druidindex.html">
        <div class="boxdruid"><img class="profsimage" src="./randomimages/driud.png">Druid</div>
      </a>
      <a href="#hunter">
        <div class="boxhunter"><img class="profsimage" src="./randomimages/hunter.png">Hunter</div>
      </a>
      <a href="#mage">
        <div class="boxmage"><img class="profsimage" src="./randomimages/mage.png">Mage</div>
      </a>
      <a href="#paladin">
        <div class="boxpaladin"><img class="profsimage" src="./randomimages/paladin.png">Paladin</div>
      </a>
    </div>
    <div class="column1">
      <a href="#priest">
        <div class="boxpriest"><img class="profsimage" src="./randomimages/priest.png">Priest</div>
      </a>
      <a href="#rogue">
        <div class="boxrogue"><img class="profsimage" src="./randomimages/rogue.png">Rogue</div>
      </a>
      <a href="#warlock">
        <div class="boxwarlock"><img class="profsimage" src="./randomimages/warlock.png">Warlock</div>
      </a>
      <a href="#warrior">
        <div class="boxwarrior"><img class="profsimage" src="./randomimages/warrior.png">Warrior</div>
      </a>
    </div>
  </div>
</div>

虚线表示由A链接包裹的框，因为我希望整个框可单击。有没有办法进行操作，以便A链接仅针对DIV框，以便在每个框之间可以默认光标？谢谢

Answer 1

您不需要更改HTML布局。

实际上，您只需要更改CSS的2行！
您的问题是一个简单的填充/保证金问题。

这是一个工作片段，我评论了我修改的地方：

.body {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  cursor: default;
}
.column1 {
  display: flex;
  flex-direction: column;
}
[class*="box"] { /* Changed class for test purpose */
  display: flex;
  padding: 5px;
  flex-direction: column;
  align-items: center;
  width: 180px;
  background-image: radial-gradient(circle at center center, #ABD473 0%, #16150c 120%);
  border: 2px solid black;
  border-radius: 3%;
  /* margin: 10px; Removed */
}
a {
  color: black;
  font-family: Dwarvesc;
  border: 1px dotted red;
  margin: 15px; /* Modified */
}

<div class="body">
  <div class="flex-container">
    <div class="column1">
      <a href="./classes/druid/druidindex.html">
        <div class="boxdruid"><img class="profsimage" src="./randomimages/driud.png">Druid</div>
      </a>
      <a href="#hunter">
        <div class="boxhunter"><img class="profsimage" src="./randomimages/hunter.png">Hunter</div>
      </a>
      <a href="#mage">
        <div class="boxmage"><img class="profsimage" src="./randomimages/mage.png">Mage</div>
      </a>
      <a href="#paladin">
        <div class="boxpaladin"><img class="profsimage" src="./randomimages/paladin.png">Paladin</div>
      </a>
    </div>
    <div class="column1">
      <a href="#priest">
        <div class="boxpriest"><img class="profsimage" src="./randomimages/priest.png">Priest</div>
      </a>
      <a href="#rogue">
        <div class="boxrogue"><img class="profsimage" src="./randomimages/rogue.png">Rogue</div>
      </a>
      <a href="#warlock">
        <div class="boxwarlock"><img class="profsimage" src="./randomimages/warlock.png">Warlock</div>
      </a>
      <a href="#warrior">
        <div class="boxwarrior"><img class="profsimage" src="./randomimages/warrior.png">Warrior</div>
      </a>
    </div>
  </div>
</div>

希望它有帮助。