#質問
下記の .element a に padding-bottom: 100% を与えても a の font-size だけ縦幅が大きくなってしまいます。
width の % 表記をやめて、親要素に height を当てるしかないと考えていますが他に a の font-size を無視して高さを指定する方法はありますか？また width と height を合わせる方法は padding 以外にありますか？

やりたいこと

aタグのクリック範囲を正方形にしたい

やったこと

html
1<div class="container">
2  <div class="elements">
3    <div class="element element1">
4      <a href="#" class="works">WORKS</a>
5    </div>
6    <div class="element element2">
7      <a href="#" class="about">ABOUT</a>
8    </div>
9    <div class=element>
10      <a href="#" class="contact">CONTACT</a>
11    </div>
12  </div>
13</div>

css
1body {
2  font-family: 'Garamond';
3}
4
5a {
6  text-decoration: none;
7}
8
9.container {
10  width: 90%;
11  margin: 0 auto;
12}
13
14.elements {
15  margin: 15vw auto 0 auto;
16  width: 70%;
17}
18
19.element {
20  width: 30%;
21  float: left;
22}
23
24.element a {
25  display: block;
26  padding-bottom: 100%;
27}
28
29.element1, .element2 {
30  margin-right: 3vw;
31}

#環境
Visual Studio Code

行動規範の内容に同意します

回答1件

ベストアンサー

padding-bottom: 100% で width と height を合わせる方法は、内包要素をposition: absolute;で浮かせるのが一般的だと思います。

HTML
1<a href="#" class="works"><div>WORKS</div></a>

CSS
1.element a {
2  display: block;
3  padding-bottom: 100%;
4  position: relative; /* ADD */
5}
6
7.element a div {
8  position: absolute;
9  width: 100%;
10  top: 50%;
11  text-align: center;
12  transform: translateY(-50%);
13}
14```**動くサンプル：**[https://jsfiddle.net/pjm8uLe4/](https://jsfiddle.net/pjm8uLe4/)