Can't Adjust Link Margins

HTML-CSS
1

Tell us what’s happening:
I’m trying to move one of my links down the page and I can’t. In fact, the only margin that works is the left margin. Why am I only able to change the left margin?

Link to my CodePen: https://codepen.io/sustinence/pen/KKZBJWP

Relevant snippet of code:

a{
  background-color: orange;
  padding: 0.3rem 1rem 0.3rem 1rem;
  margin-top: 1rem;
  margin-left: 1rem;
  margin-bottom: 1rem;
  margin-right: 1rem;

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.3 Safari/605.1.15

Challenge: Build a Product Landing Page

Link to the challenge:

2

The <a> element is an inline element. Top and bottom margins have no effect. You can change the display type (to block for example).

MDN: margin

The top and bottom margins have no effect on non-replaced inline elements, such as <span> or <code>.

1 Like
3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.