为什么我的链接卡在浏览器的顶部边框上？ [复制]

Question

为什么我的链接卡在浏览器的顶部边框上？

box-sizing: border-box;不要改变任何东西

a {
  background-color: #405cf5;
  color: white;
  border-radius: 6px;
  font-size: 1.2em;
  padding: 15px 25px;
  text-decoration: none;
  margin-top: 20px;
}

<a href="/posts">Back</a>

Answer 1

边距不适用于内联元素，并且只有 left 和 right 属性会推动其他元素。更改您的链接（默认为内联）以显示 inline-block ，它将根据您给它的边距和填充移动：

a {
  background-color: #405cf5;
  color: white;
  border-radius: 6px;
  font-size: 1.2em;
  padding: 15px 25px;
  text-decoration: none;
  margin-top: 20px;
  display:inline-block;
}

<a href="/posts">Back</a>