css large margin but borders overlap

Question

The navigation moves down to the next line so they they stay in the browser, and that is when the borders overlap. How can I make it so that the borders have space in-between them vertically? Horizontally, the margin works like normal, adding space between the elements as the pixels increase, but not vertically.

.nav:link {
     color: #118794;
     text-decoration: none;
     margin: 10px;
     padding: 4px;
     border-width: 4px;
     border-style: ridge;
}
.nav:visited {
     color: #0BB545;
     text-decoration: none;
     margin: 10px;
     padding: 4px;
     border-width: 4px;
     border-style: groove;
}
.nav:hover {
     color: #0BB545;
     text-decoration: underline;
     border-style: groove;}    
     border-style: groove;
 }

      <nav class="navbar">
       <a class="nav" id="top" href="index.html">Home</a>
       <!--**Create Drop Down for People-->
       <a class="nav" href="family/utahfamily.html">My Family</a>
       <a class="nav" href="friends/utahfriends.html">Friends</a>
       <!--**Create Drop Down for places-->
       <a class="nav" href="hiking/utahhiking.html">Hiking</a>
       <a class="nav" href="recreation/utahrecreation.html">Recreation</a>
       <a class="nav" href="restaurants/utahrestaurants.html">Restaurants</a>
       <!--**Create Drop Down for Adventures-->
       <a class="nav" href="mountainadventure/utahmountains.html">Mountains Adventure</a>
       <a class="nav" href="ranchadventure/utahranch.html">Ranch Adventure</a>
       <a class="nav" href="tuningadventure/utahtuning.html">Piano Tuning Adventure</a>
       <a class="nav" href="/otherthings/stufftodo.html">Other Things to Do</a>
       <!--contact-->
       <a class="nav" href="contact/contact.html">Contact</a>
      </nav>
      
      <!--end  nav-->

Please provide some minimal HTML so we have an example (see [MCVE]). Note also there is a html/css/js tool you can use to make your code runnable inline. — kabanus, Oct 30 '18 at 13:19
Ok. I added the Html. Sorry, I'm new. Also, I can't add a photo until I have 10 points, otherwise I would include one. — Austin Weiss, Oct 30 '18 at 13:24
That's fine, much better. Note you have a duplication in your CSS, though likely unrelated to your problem. — kabanus, Oct 30 '18 at 13:25

score 1 · Answer 1 · answered Oct 30 '18 at 13:30

This is the behavior - the CSS is treating everything as inline (default), and this is how it looks like with borders/margins/paddings since the margin is only on the links. One solution as to use inline-block (might want to get rid of margins now):

.nav:link {
     color: #118794;
     text-decoration: none;
      display:inline-block;
     margin: 10px;
     padding: 4px;
     border-width: 4px;
     border-style: ridge;
}
.nav:visited {
     color: #0BB545;
     text-decoration: none;
     margin: 10px;
     padding: 4px;
     border-width: 4px;
     border-style: groove;
}
.nav:hover {
     color: #0BB545;
     text-decoration: underline;
     border-style: groove;
 }

<nav class="navbar">
       <a class="nav" id="top" href="index.html">Home</a>
       <!--**Create Drop Down for People-->
       <a class="nav" href="family/utahfamily.html">My Family</a>
       <a class="nav" href="friends/utahfriends.html">Friends</a>
       <!--**Create Drop Down for places-->
       <a class="nav" href="hiking/utahhiking.html">Hiking</a>
       <a class="nav" href="recreation/utahrecreation.html">Recreation</a>
       <a class="nav" href="restaurants/utahrestaurants.html">Restaurants</a>
       <!--**Create Drop Down for Adventures-->
       <a class="nav" href="mountainadventure/utahmountains.html">Mountains Adventure</a>
       <a class="nav" href="ranchadventure/utahranch.html">Ranch Adventure</a>
       <a class="nav" href="tuningadventure/utahtuning.html">Piano Tuning Adventure</a>
       <a class="nav" href="/otherthings/stufftodo.html">Other Things to Do</a>
       <!--contact-->
       <a class="nav" href="contact/contact.html">Contact</a>
      </nav>
      
      <!--end  nav-->

css large margin but borders overlap

1 Answers1