Question 238983 in CSS Question posted in
Some basic documentation can be found here.

My elements are too close together. How do I space my nav elements in CSS?

I want my nav elements to be placed to the right of my webpage and it is. No problems there. My issue is that my nav elements are too close together. I expect them to be more spaced out. What is wrong here and what do I need to do?

nav {
  text-align: right;
  font-family: 'Gill Sans', 'Gill Sans MT', 'Calibri', 'Trebuchet MS', sans-serif;
  font-size: 25px;
  margin-right: 40px;
  padding-right: 20px;
  padding-top: 30px;
  color: black;
}

nav a {
  font-family: 'Gill Sans', 'Gill Sans MT', 'Calibri', 'Trebuchet MS', sans-serif;
  text-decoration: none;
  color: black;
}
<nav>

  <a href="#">Gaming</a>

  <a href="#">Wishlist</a>

  <a href="#">Merch</a>

  <a href="#">Contact</a>

</nav>
Tags:

2

Answers


  1. 0

    I think there are a lot of solutions:

    1. Adding padding or margin to your a inside the nav

    2. Gap property

    gap: 5px; // 5px for exmaple
    Login or Signup to reply.
  2. 0

    You should give margin in nav a instead of nav if you want want space between your nav elements

    nav {
  text-align: right;
  font-family: 'Gill Sans', 'Gill Sans MT', 'Calibri', 'Trebuchet MS', sans-serif;
  font-size: 25px;
  margin-right: 40px;
  padding-right: 20px;
  padding-top: 30px;
  color: black;
}

nav a {
  font-family: 'Gill Sans', 'Gill Sans MT', 'Calibri', 'Trebuchet MS', sans-serif;
  text-decoration: none;
  color: black;
margin:0 20px
}
    <nav>

  <a href="#">Gaming</a>

  <a href="#">Wishlist</a>

  <a href="#">Merch</a>

  <a href="#">Contact</a>

</nav>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search