浏览器中链接紧贴顶部边框，设置box-sizing:border-box无效如何解决？

问题原因 #

<a>标签默认属于行内元素（inline），行内元素的上下margin、上下padding不会在正常文档流中产生实际的间距撑开效果，你代码里写的margin-top: 20px实际没有生效，因此元素会紧贴顶部边框。
你设置的box-sizing: border-box是用来控制元素宽高的计算规则，和行内元素的margin生效逻辑无关，自然不会产生作用。

解决方法 #

最常用的方案是给<a>标签添加display: inline-block属性，将其转为行内块元素，既不会像块级元素一样独占整行，也可以正常识别上下margin、padding属性：

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

如果你需要这个链接独占一行，也可以将属性值改为display: block。如果该链接的父元素是Flex/Grid布局，子元素默认支持上下margin，不需要额外修改display属性。

内容的提问来源于stack exchange，提问作者Denys_newbie