box-sizing:border-boxを適用しているにも関わらず、paddingがwidthに含まれない理由が分かりません

box-sizing:border-boxを適用しているのですが、paddingを当てた部分がwidthに反映されないです。

html
1<header class="flex">
2      <div class="header_left_column">
3        <h1>Dotinstall Pane</h1>
4        <p>ドットインストールを見ながら
5          コーディングができるAtomパッケージ
6        </p>
7        
8        <div class="header_left_link"><a href="#">詳細を見る</a></div>
9      </div>
10      <div class="header_right_column">
11        <img src="img/top.png" width="700px">
12      </div>
13      
14    </header>

css
1*{
2  box-sizing:border-box;
3}
4header{
5  background-image:url(img/bg.png);
6  padding:40px 0 0 50px;
7}
8.flex{
9  display:flex;
10}
11.header_left_column{
12  margin-left:62px;
13}
14.header_right_column{
15  margin-left:200px;
16}
17.header_left_column h1{
18  font-size:50px;
19  color:#fff;
20}
21.header_left_column p{
22  color:#fff;
23  white-space: pre-line;
24  line-height:1.5;
25  font-size:18px;
26}
27.header_left_link a{
28  width:100%;
29  text-decoration:none;
30  color:orange;
31  display:inline-block;
32}
33.header_left_link{
34
35  text-align:center;
36  border-radius:6px;
37  background-color:#FFFAF0;
38  padding:20px;
39  opacity:1;
40
41}
42
43.header_left_link a:hover{
44  opacity:1; 
45}

上記のコードなのですが、「header_left_link」に指定しているpaddingをwidthに含め、結果的に、「header_left_link a」のクリックできる箇所をボックス全体にしたいと考えているのですが、widthがpaddingの範囲に含まれておらず、paddingを適用している箇所はクリックできません。
何故、box-sizing:border-boxを適用しているにも関わらず、paddingがwidthに含まれないのでしょうか？

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

回答1件

ベストアンサー

.header_left_linkにpaddingプロパティを適用したときに広がるのは、.header_left_linkのpadding領域であり、a要素内のリンク領域が広がるわけではありません。
今回の場合、.header_left_link aに対してpaddingプロパティを設定することで、質問者さんが実現したいことが行えると思います(動作確認用リンク)。

CSS
1* {
2  box-sizing: border-box;
3}
4header {
5  background-image: url(img/bg.png);
6  padding: 40px 0 0 50px;
7}
8.flex {
9  display: flex;
10}
11.header_left_column {
12  margin-left: 62px;
13}
14.header_right_column {
15  margin-left: 200px;
16}
17.header_left_column h1 {
18  font-size: 50px;
19  color: #fff;
20}
21.header_left_column p {
22  color: #fff;
23  white-space: pre-line;
24  line-height: 1.5;
25  font-size: 18px;
26}
27.header_left_link a {
28  width: 100%;
29  text-decoration: none;
30  color: orange;
31  display: inline-block;
32  padding: 20px; /* 追記 */
33}
34.header_left_link {
35  text-align: center;
36  border-radius: 6px;
37  background-color: #fffaf0;
38  /* padding: 20px; 削除 */
39  opacity: 1;
40}
41
42.header_left_link a:hover {
43  opacity: 1;
44}