Html Div未正确包装链接

如何使链接保持在div元素内部，而不在其上下扩展？看起来它与未考虑的填充有关，div认为链接与文本一样高

有办法绕过它吗

代码：

div{
背景颜色：黄色；
边缘顶部：20px；
}
a{
填充：10px；
边框：1px纯黑；
背景颜色：蓝色；
}
a:链接{
颜色：白色；
}

在div中添加填充，而不是链接

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

---

在div中添加填充，而不是链接

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

---

因为在锚点上使用填充，所以需要设置display:block

请看我的护照

---

因为在锚点上使用填充，所以需要设置display:block

请看我的护照

---

我想在链接文本和它的边框之间有填充，而不是在div中。那么你就没有其他选项来添加display:block；你的链接我想在链接文本和它的边框之间有填充，而不是在div中。那么你就没有其他选项可以添加display:block；到你的链接这将链接延伸到div的长度，这是不可取的。我只希望div从上到下完全包裹链接。这会将链接拉伸到div的长度，这是不可取的。我只希望div从上到下完全包裹链接。这会将链接拉伸到div的长度，这是不可取的。我只希望div从上到下完全包裹链接。这会将链接拉伸到div的长度，这是不可取的。我只想让div完全从上到下包装链接。

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

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;   
}