Div框内的A链接，希望最小化A链接光标框区域

Question

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

Issue at hand

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

红色虚线表示由A链接包装的框，因为我希望整个框可以点击。是否有办法使A链接只是目标div框，所以光标可以默认在每个框之间？感谢

Answer 1

您无需更改HTML布局。

事实上，你只需要更改2行CSS！ 您的问题是一个简单的填充/边距问题。

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

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

希望它有所帮助。