Why my link is jammed up against top border in browser?

Question

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>

score 4 · Accepted Answer · answered Nov 09 '21 at 21:20

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>

Why my link is jammed up against top border in browser?

1 Answers1