<a>タグのリンク領域を、サイズ指定なしの親ボックスの大きさに合わせたい

Question

お世話になります。
cssの記述で困っております。

<style>
p.box{
 padding: 20px;
 display: table;
 border: 3px solid #333;
 margin: 0 auto 100px;
}
a {
 font-size: 1.2rem;
}
</style>

<p class="box"><a href="リンク先URL">VIEW</a></p>

上記のように、<p>要素の幅・高さが、<a>要素の文字数やサイズに依存している場合、
リンク領域を<p>の縦横サイズいっぱい(padding:20pxも含めた)まで設定することは可能でしょうか？
現状、リンク領域は文字の部分にしか掛かっておりません。
詳しい方がいらっしゃればご教示頂きたく思います。

###やってみたこと

以下のcssで試してみましたが、親にwidth、heightを指定していないためか崩れます。

<style>
p.box{
 position: relative;
 padding: 20px;
 display: table;
 border: 3px solid #333;
 margin: 0 auto 100px;
}
a {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 font-size: 1.2rem;
}
</style>

Answer 1

テキストしか入らない、ということであれば…

p.box {
  padding:0;
}
p.box a {
  display:block;
  padding:20px;
}

だけでOKじゃないですか？
勘違いだったらすみません。

Comments

[no23h]

YukitomoNishinoさま

ご返事いただきましてありがとうございます。
早速試してみましたところ、うまくいきました！
親要素をどうするかということばかり考えて気づきませんでした。
ありがとうございました！