What causes duplicate hyperlinks when adding padding to an anchor tag?

  nav ul li a
    {
        display : block ;
        text-align : center;
        font-weight : 600;
        text-decoration : none;
        color:#fff;
        background-color : rgba(0,0,0,0.15);
        margin : .2em 0;
        padding: .2em 0;
        border-radius: 1em;
        box-shadow : 1px 1px 4px #000;
    }

https://i.sstatic.net/I7yUy.jpg

The issue with the crushed look of the anchors can be resolved by adjusting the padding property. If you remove it entirely, everything should appear fine, but if you want the anchors to have some spacing around them for a more spacious look, tweaking the padding values is the way to go.

Answer №1

To create vertical space, consider using line-height instead of padding

Answer №2

Is there anchor text within your tags? Without any text, the links won't consume any space. If you intend on keeping the links text-free, consider adding a min-height attribute to ensure they maintain a certain height.

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

What is the best way to pass an array from a controller to an AJAX function in Laravel 4?

Hi there, I'm currently using Laravel 4 and I'm still a beginner in this field. I am trying to retrieve an array of data from my controller to pass it to my AJAX function for assisting me in creating my chart. Here is the code snippet from my co ...

Download the PDF instead of just viewing or downloading it through a link

I need help configuring a link so that when the user clicks "download here," a PDF file is automatically downloaded to their desktop. Can someone provide guidance on how to achieve this? ...

No matter how many times I use jQuery Selector.size(), it always seems

I'm currently in the process of developing an ASP.NET MVC web application and incorporating jQuery for certain client side functionalities. One feature I'm working on involves displaying categories retrieved from a database, and dynamically gener ...

Clicking on a button in HTML to open a JavaScript file

As a beginner in HTML and JavaScript, I am looking for a way to open a JavaScript file when the onclick event of a button in my HTML file is triggered. Can anyone provide me with guidance on how to achieve this? Thank you in advance. ...

Creating a responsive navigation menu using Bootstrap 4 by merging data from various MySQL tables

I am struggling to create a bootstrap 4 nav-menu using the provided SQL query and code snippets. Below are the tables: TABLE menu -------------------------------------- | id | title | url | | 1 | Home | index.php | | 2 | M ...

Transferring a parameter from link_to to a popup window in a Rails application

I am facing an issue with passing an object to my modal in Rails. The object has a table of results with an attribute "email", but I seem unable to pass it so that I can use it within my modal. index.html.erb <div class="modal fade bs-example-modal-lg ...

Tips for using jQuery to identify the most recently modified row in an HTML table

Is there a way to identify the most recently modified (either newly added or changed) row in an HTML table? ...

Add the Google analytics JavaScript code to your ASP.NET web application

I am trying to integrate the Google Analytics code into my ASP.NET web page, but it is not tracking any data. I want to capture information such as geolocation, IP address, session ID, and browser details using Google Analytics. Below is the code snippet I ...

New Npm release reintroducing dual string key:value combinations

When I run npm version, I get a strange key-value pair that I can't seem to remove. I'm not sure where it came from or how to get rid of it. 'livelocation-master': '1.0.0' A little background: I initially used react-native w ...

Change from one value to another using a decaying sinusoidal wave

Can someone help me come up with a formula that will smoothly transition from a starting value to an end value over a specified time using a Sin or Cos wave? I'm attempting to replicate a bouncing effect like the one shown in my sample using CSS and ...

Show error messages from HTML 5 Validation using a software program

Is it possible to manually trigger the HTML 5 validation message using code? As far as I can tell, there isn't a straightforward way to do so directly. However, it seems we can prompt this message by simulating a click on the submit button. I attempt ...

The wp_mail function is exclusively designed to send plain text

I have encountered an issue while using the wp_mail() function to send HTML formatted emails. Despite setting the headers to indicate "Content-Type: text/html; charset=UTF-8", all the emails appear as plain text without any formatting. While testing on Wi ...

Avoiding the duplication of selected items in a dropdown within a gridview can be achieved effectively by implementing a JavaScript/jQuery

In my gridview, which contains multiple rows, each row has a dropdown (select in HTML). My goal is to prevent the user from selecting the same item from the dropdown list for different rows. For instance, if a user selects "New York": Assigning rooms: U ...

What caused the failure of the ++ operator in production mode?

Encountering an issue with a reducer in my code. There is a button with an onClick function that triggers a NextBox action to alter the state of a React UseContext. The application was built using Vite, and while running npm run dev, everything functions a ...

What is the best way to add selected values from a multi-select dropdown into an array?

Attempting to populate an array from a multiple select dropdown, I've encountered an issue. Despite using splice to set the order of values being pushed into the array, they end up in a different order based on the selection in the dropdown. For insta ...

Can you explain the concept of "excluded" in relation to project subdirectories on Webstorm?

When using Webstorm, you have the option to mark project subdirectories as "excluded". However, the full implications of this designation remain unclear in the Webstorm documentation. Does marking a directory as excluded impact debugging or deployment proc ...

Validate the file's existence and overwrite it if it does in PHP

I'm working on a simple form that lets users upload files to the server. However, I'm encountering an error when a user tries to upload a file with the same name as one already on the server... What I want is for it to delete the old file and upl ...

Restricting responsiveness in Bootstrap 4

How can I limit the responsiveness of my bootstrap project? For example, let's consider the following element: <div class="col-sm-12 col-md-6 col-lg-4">column</div> I want to prevent Bootstrap from resizing the website on .col-sm (websi ...

Is it possible to refresh the chat-box using PHP?

I recently created a chat box application using PHP, but I'm facing an issue with its automatic reload functionality. Is there a way to implement auto-reload in PHP itself, or would it be better to restructure the system to utilize AJAX? Additionally, ...

Having trouble formatting JSON data in a jQuery datatable with accurate information

Currently, I am diving into the world of jQuery tables specifically for a report that I am working on. Despite successfully receiving the API response, I am facing challenges in binding it to the jQuery datatable. I have searched through various questions ...