html - Divがリンクを正しくラップしていない

Question

リンクをdiv要素内にとどめ、その上下に拡張しないようにするにはどうすればよいですか？考慮されていないパディングと関係があるようで、divはリンクがテキストと同じ高さであると考えています。

それを回避する方法はありますか？

フィドル

コード：

div {
    background-color: yellow;   
    margin-top: 20px;
}
a {
    padding: 10px;
    border: 1px solid black;
    background-color: blue;    
}
a:link {
    color: white;   
}

<div><a href="#">Link button</a></div>

Answer 1

div {
    background-color: yellow;   
    margin-top: 20px;
}
a {
    padding: 10px;
    border: 1px solid black;
    background-color: blue; 
    display:inline-block    
}
a:link {
    color: white;   
}

Answer 2

リンクではなく、divにパディングを追加します。

div {
 padding: 10px;
 background-color: yellow;   
 margin-top: 20px;
}
a {
border: 1px solid black;
background-color: blue;
}
a:link {
 color: white;   
}

Answer 3

アンカーにパディングを使用しているため、display：blockを設定する必要があります。

ここで私のjsfiddleを参照してください。

div {
  background-color: yellow;   
  margin-top: 20px;
}
a {
  padding: 10px;
  display:block; //Added this
  border: 1px solid black;
  background-color: blue;    
}
a:link {
  color: white;   
}