``Navigating the gaps: Finding balance between navigation links

I'm struggling with creating spacing between my navigation links, specifically wanting to add space between each link that is bordered with a black border. I've looked online for solutions but all I find are ways to reduce space instead of adding it.

Below are the codes for my navigation bar. Any assistance would be greatly appreciated. Thank you.

ul {
    list-style-type: none;
    position: fixed;
    margin-top: 50px;
    padding: 0;
    width: 200px;
    background-color: #fff;
    border: 5px solid #000;
 }

 li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
 }

 li {
    text-align: center;
    border-bottom: 5px solid #000; 
 }

li:last-child {
     border-bottom: none;
}

li a:hover {
    background-color: #555;
    color: white;
}
<ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
</ul>
htmlcss

Answer №1

Check out the code below:

<style>
ul {
    list-style-type: none;
    position: fixed;
    margin-top: 50px;
    padding: 0;
    width: 200px;
    }

 li a {
    display: block;
    color: #000;
    padding: 8px 16px;  
    text-decoration: none;
    border: 5px solid #000;
    background-color: #fff;
    }
 li {
    text-align: center;
    margin-bottom:10px;
}
li:last-child {
     margin-bottom:0;
}

li a:hover {
    background-color: #555;
    color: white;
}
</style>



<ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
 </ul>

Take a look at the live demo: https://jsfiddle.net/4fLbx4xa/

Answer №2

 <div id="nav-menu">
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>

    <style> 
        ul {
            list-style-type: none;
            position: fixed;
            margin-top: 50px;
            padding: 0;
            width: 200px;
            background-color: #fff;
        }

        li{
            width:100%;
            display: block;
            margin-top:10px; //this is the height you want
            border: 5px solid #000; 
            color: #000;
            background:#000;
            padding:10px 0;
        }
        
        li a {
            text-align: center;
            padding: 8px 16px;  
            text-decoration: none;
            color:#fff;
        }

        li:first-child {
            margin-top:0;
        }

        li:hover {
            background-color: #555;
            color: white;
        }
    </style>
</div>

Answer №3

To create space around the content, utilize margin and make slight adjustments to the borders as specified in the comments provided below

ul {
  list-style-type: none;
  position: fixed;
  margin-top: 50px;
  padding: 0;
  width: 200px;
  background-color: #fff;
  /*border: 5px solid #000; now applied to LI elements instead*/
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;  
  text-decoration: none;
  margin-bottom:10px; /*add margin for spacing effect*/
  border: 5px solid #000; /*borders now on individual LI elements, not UL*/
}
li {
  text-align: center;
  /*border-bottom: 5px solid #000; this bottom border is no longer needed with new LI css styling*/
}

Answer №4

If you are unsure about your goal, but I see a connection between the links, consider placing this information below the links for better clarity.

ul {
    list-style-type: none;
    position: fixed;
    margin-top: 50px;
    padding: 0;
    width: 400px;
    background-color: #fff;
    border: 5px solid #000;}
    
li a {
    display: block;
    color: #000;
    padding: 8px 16px;  
    text-decoration: none;}
 li {
    text-align: center;
    float: left;
    border-right:solid 1px black;
}

li a:hover {
    background-color: #555;
    color: white;
}
 <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
 </ul>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Disable the button until all input fields contain text in ASP

Curious if anyone knows how to disable a button until all text boxes have input in ASP.NET and C#. Here is an image showing the scenario I'm referring to - wanting to gray out the commit button. Thanks, Chris! ...

c#javascripthtmlasp.net

Achieving a scrollable div with ng-repeat

I have implemented ng-repeat to showcase some messages, and I am attempting to create a scrollable "message_area" as the messages overflow naturally over time. However, my current code is not delivering the desired outcome. <div class="main_area"> ...

javascripthtmlcssangularjs

Achieving vertical alignment of button contents in Bootstrap 4

Incorporating bootstrap 4 and material icons into my app has presented a challenge. Specifically, the issue arises when I attempt to create a button that contains both text and an icon. .button-icon { vertical-align: middle; } <button class="button ...

htmlcsstwitter-bootstrapbootstrap-4google-material-icons

Interacting with Apexcharts: Exploring a Tiny Column with Hover

While using apexcharts, I encountered an issue with small columns. It can be quite challenging to render the tooltip properly because you have to hover very precisely over the column. Query: Is there a way to expand the hover area to make it easier to int ...

javascriptcssreactjschartsapexcharts

Adjusting Image Size According to Window Resize?

My current issue involves having four images displayed side by side. When the window size is adjusted or viewed on a smaller device, the layout shifts to a line jump (with three images in a row and the fourth one below). What I actually want is for all fou ...

javascriptjquerycsshtmlimage-resizing

As the browser window is resized, the gap between images widens while the images themselves decrease

Hey there, I'm encountering some trouble with the image links at the top of my page. As I resize the browser or change screen resolutions in media queries using percentages, the images are resizing accordingly. However, I'm noticing that as the i ...

htmlcssimagescalespace

Exploring the possibilities of toggling between a personalized CSS design and a Bootstrap CSS layout

Is it possible to implement a dropdown menu on my sample-page using javascript/jquery in order to switch between a custom layout and a bootstrap layout? ...

javascriptjqueryhtmlcss

"Tagging multiple content snippets within a label element to create a truncated text

How can I truncate a specific inner span of a label, containing multiple span elements, to prevent overflow into the next line? To address this issue, I have created a JSFiddle available at https://jsfiddle.net/keltik/k18892xe/3/. Here is a snippet of the ...

htmlcsssassspectre.css

What is the best way to replicate a div's background color using an image within the body element?

I am looking to achieve a layout similar to the one below: https://i.sstatic.net/1cOYw.png The dark grey color represents the sidebar, but I want to use this color as a repeating vertical image in the body element without covering the footer (light gray) ...

htmlcssimagebackground

There seems to be an issue with the HTML link not redirecting properly, as it is directing to www.oldpage.com/http://www

Has anyone experienced a similar issue before? I can't figure out why this is happening. Here's the HTML code I'm using: <a href="www.google.com">www.google.com</a> Despite it appearing correct, when I click on the li ...

htmlhyperlink

Tips for positioning a 404 message at the center of a webpage

Struggling with centering a 404 error message on your Bootstrap 5 page without messing up the footer layout? When the viewport is small, the 404 message may end up getting covered by the footer. Feel free to check out the code snippet in full view to see ...

htmlcssresponsive-designfrontendbootstrap-5

Creating a right-aligned glyph within a Panel header using Bootstrap

I am currently designing a Panel using bootstrap and I would like to include a glyph in the heading, aligned to the right. I tried adding "text-right" to the span tag but unfortunately, it didn't work as expected. Here is the code snippet: < ...

htmlcsstwitter-bootstrap

I cannot locate the dropdown list anywhere

As a beginner in html and css, I decided to follow a tutorial on youtube. The tutorial focuses on creating a navigation bar with dropdown menus using html and css. I wanted the names Ria, Kezia, and Gelia to be displayed when hovering my mouse over the Su ...

htmlcss

Initiate the React application with the given external parameters

I have created a React app that is embedded within a webpage and needs to start with specific parameters obtained from the page. Currently, I am passing these parameters in the index.HTML file within a div element. The issue arises when these parameters ar ...

javascripthtmlreactjs

Is there a way to asynchronously load image src URLs in Vue.js?

Why is the image URL printing in console but not rendering to src attribute? Is there a way to achieve this using async and await in Vue.js? <div v-for="(data, key) in imgURL" :key="key"> <img :src= "fetchImage(data)" /> </div> The i ...

javascripthtmlwebpackvue.jsasync-await

Enhancing user experience by highlighting invalid input fields with a red border using client-side HTML5 validation and Bootstrap 5.2

When reviewing the Bootstrap 5.2 validation documentation, https://getbootstrap.com/docs/5.2/forms/validation/ "It has come to our attention that the client-side custom validation styles and tooltips are not accessible at this time, as they are not ...

htmlcssformsvalidation

What is preventing the input box from shrinking further?

I created a search box using CSS grid that is supposed to shrink when the page is resized. However, it doesn't seem to shrink as much as I expected it to. Here is how it appears when fully extended: https://i.stack.imgur.com/tPuCg.png And here is how ...

javascriptcssreactjscss-grid

The value entered is displaying as not defined

As a newcomer to the world of javascript, I am diving into creating a simple To Do list. The basic functionality is there, but I'm scratching my head trying to figure out why the input value in my code keeps returning undefined. The remove button is ...

javascripthtmlcsssass

The button now has a stylish 5px border, making it slightly larger in size. However, it seems

How can I add an active class with a 5px border-bottom on a button without increasing the button size by 5px? The box-sizing property is not working for me. Is there a simple solution to achieve this? *, *:after, *::before { -webkit-box-sizing: border ...

htmlcss

How can I delete the onmouseover function in HTML?

Is there a way to remove the (onmouseover="mouseoversound.playclip()") function from the following HTML code? <a href="roster.html" onmouseover="mouseoversound.playclip()">Roster</a> Can we instead implement this functionality in a JavaScript ...

javascriptjqueryhtml