CSSでボックス全体をリンクにする

Question

「投稿する」と書かれたURLをボックスにして、ボックス全体をリンクにしました。

試してみると、ボックスは確かにURLになっているのですが、ボックスの左右もクリックしたらリンクになっていました。つまりボックスの外側(左右)もリンクになってしまいます。

<a href="#">
  <div class="toko">
    <h1>投稿する</h1>
  </div>
</a>

.toko{
  width: 600px;
  margin: 0 auto;
  padding: 20px;
  background: #389bc2;
  color: #ffffff;
  text-align: center;
}
.toko:hover{
  opacity: 0.5;
}

a{
  text-decoration: none;
}

どこが原因なのでしょうか？教えてください。

Answer 1

aとdivを入れ替えましょう。

<div class="toko">
  <a href="#">
    <h1>投稿する</h1>
  </a>
</div>

変更後のpaddingやcolorは調整してください

Answer 2

.tokoが原因です。

.toko{
  width: 600px;
  margin: 0 auto;
  padding: 20px;
  background: #389bc2;
  color: #ffffff;
  text-align: center;
}

何をしたいかよくわかりませんが、widthとmargin: 0 autoを消してください。

Answer 3

divはいらないのでは？

a.toko{
  display:block;
  width: 600px;
  margin: 0 auto;
  padding: 20px;
  background: #389bc2;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
}
.toko:hover{
  opacity: 0.5;
}

<a href="#" class="toko">
    <h1>投稿する</h1>
</a>