Why my link is jammed up against top border in browser?
box-sizing: border-box; don’t change anything
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>
>Solution :
Margins don’t apply to inline elements, and with padding only the left and right property will push other elements. Change your link (inline by default) to have a display of inline-block and it will move according to the margin and padding you gave it:
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>