css - 在 a 中填充元素实现一个可点击的框

Question

在这个网站上：http ://www.bestcastleintown.co.uk/pg/

我试图<div class="awards_square_home">通过在其中嵌套一个<a>标签<div>并添加填充来使每个的彩色区域成为一个可点击的链接。但是我已经在 上使用填充<div>来定位<a>. 使用此规则中的填充：

.awards_square_home {
    border: 10px solid rgb(195, 195, 195);
    height: 90px;
    margin-bottom: 20px;
    padding: 90px 20px 20px;
} 

现在，当我向元素添加填充时，它不会以我想要的方式传播填充，这是为了使 div 的整个彩色区域都可以点击。

.awards_square_home a {
    padding: 120px 0 20px;
}

我正在尝试从<a>填充这个区域<div>：

Answer 1

我相信我已经通过如下修改 CSS 解决了这个问题：

.awards_square_home {    
    border: 10px solid #c3c3c3;     
    height: 200px;
    margin-bottom: 20px;
}

.awards_square_home a {
    display:block;
    padding: 90px 0px 20px 0px;
}

Answer 2

除了在 parent 上设置 background / padding / height <div>，您可以将<a>元素设置为像 div 一样，然后将它们设置在那里：

a {
  display: block;
  background-image: url("../images/icons/globe_v3.gif");
  background-repeat: no-repeat;
  background-position: 50% 15%;
  padding: 95px 20px 20px 20px;
  height: 90px;
}

不要忘记从它们当前存在的位置删除这些属性。

Answer 3

为什么你不能添加<div>到<a>标签中？

a {
    display: block;
}

并将您的内容添加到<a>标签中。

或者从 div 中删除填充并仅为<a>标签设置填充。

Answer 4

如果我没有误解你，你希望你的 div 都是可点击的，而不仅仅是文本。

<a href="#" class="text220 centertext capitalise_text home_feature_turqoise NG">
    <div class="awards_square_home turqoise podium">
        <span>Best</span>
        <span>University</span>
        <span>Campaign</span>
    </div>
</a>

在这里提琴

Answer 5

如果你想让 a 填充 div，为什么要在 div 上使用 padding，在 tha a 上使用 margin，唯一的目的是防止 a 填充 div？

删除a上的填充，它应该可以工作