eliminate gaps between hyperlinks using cascading style sheets

I developed a webapp for iOS which has a specific page containing a centered div with 3 buttons.

Inside this div, there is a total of 460px with each link measuring as follows: the first and last are 153px while the middle one is 154px.

The main issue arises when I place these links together without any spaces in between. It appears fine in that scenario, but if I add a newline between them, it causes misalignment.

An example of the problem can be seen here: http://jsfiddle.net/NicosKaralis/zJxfs/1/

My goal is to make the second set of links appear just like the first set. Is there a CSS property that could help achieve this?

htmlcss

Answer №1

display:inline-block automatically includes an additional 4px to the left of each element. To counteract this, you can either assign a negative margin to the left of each element (margin-left:-4px;), or float your elements to the left.

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

Motion of the atoms

I recently came across an interesting effect on the IconArchive website, but I am unsure how to implement it. If anyone could help me understand the concept with a small example, that would be greatly appreciated. You can see the effect in action by visi ...

javascriptjqueryhtmlcss

Adjust the position of the icon in the Mui DatePicker widget

How can I customize the mui DatePicker? I successfully changed the icon, but now I need to adjust its position as well. Instead of being at the end of the text, I want the icon to be at the beginning. Here is my code: <ThemeProvider theme={calendarThem ...

htmlcssreactjsmaterial-uiicons

The getimagesize functionality seems to be malfunctioning

I have developed a function that resizes images to fit as a background image for a div. I provide the function with the div size and the image path. It works perfectly when the height is larger than the width, but it fails when the width is larger than the ...

phphtmlcss

Techniques for transferring images directly into HTML canvas games

I created a thrilling race car game and here is the code snippet: index.html <!DOCTYPE html> <html> <head> <title> Extreme Race Car Game </title> <link rel="stylesheet" type="text/css" href="style.css"> < ...

javascriptjqueryhtmlcsshtml5-canvas

Creating a table using Jade/Express.js that displays various elements in each row

Looking to create a dynamic table layout using Jade for an array of objects where three objects are displayed on each row. <table> <thead>...</thead> <tbody> <tr> <td>obj0</td> <td>obj1 ...

htmlnode.jsexpresshtml-tablepug

Escape key does not close the modal dialogue box

I’ve customized the codrops slide & push menu (http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/) to create an overlay on a webpage. Although it functions as intended, I’m struggling to implement a way to close it by pressing the escape ...

javascripthtmlcssmodal-dialog

The DOMException occurred when attempting to run the 'querySelector' function on the 'Document' object

Currently, I am engaged in a project that was initiated with bootstrap version 4.3.1. I have a keen interest in both JavaScript and HTML coding. <a class="dropdown-item" href="{{ route('user.panel') }}"> User panel </a& ...

javascripthtmlcssbootstrap-4laravel-5.8

Odd gap beside Bootstrap5 navbar that needs fixing

While working on a layout featuring a left-sided nav-bar menu, I encountered an odd blank space between the navbar and the main content area. Can anyone shed light on why this space appears and how to eliminate it? For reference, here is the code snippet: ...

javascripthtmlcssbootstrap-5

Save modified content in CKEditor to an HTML document

Currently, I am utilizing the Ajax success function to dynamically load the content from an HTML file into CKeditor. function retrieveFileContent(fileUrl) { $.ajax({ url: fileUrl, success: function (data){ ...

javascriptjqueryhtmlajaxckeditor

Unwrapping the Angular ngForm Mystery: Resolving

I was attempting to retrieve values using ngOnInit and initializing the form with default values, but for some reason the form is returning as undefined. I also tried using patchValue, but since the form is undefined, it doesn't work. It's intere ...

htmlangularangular-forms

Utilizing HTML5 Drag and Drop feature to track the initial position of the element being dragged

Currently, I am utilizing the HTML 5 Drag and Drop API to create a sortable list with auto scroll functionality. One crucial aspect I am trying to incorporate is the ability to detect which specific part of an element was grabbed by the user. Take a look ...

javascripthtmldrag-and-drophtml5-draggable

React Native - Scaling images dynamically

I have a responsive photo grid built within a mobile app. I want to display three images across the screen with equal spacing between them. All the images are squares. Unfortunately, using percentages for each image's width and height is not possible ...

cssreactjsreact-nativeflexbox

Avoid having the java applet destroyed when the container is hidden

I am working with multiple DIVs, each containing text, a java applet (unfortunately...) and buttons. I am currently creating a search function to dynamically show and hide these DIVs. However, whenever I use display:none on a DIV, the applet inside it se ...

javajavascripthtmlcssapplet

Issues encountered with the delete function using distinct row identification format

I am encountering an issue with variable value in input field. To provide some context, I have client information stored in a MySQL database. Using PHP, I retrieve this data and display it in a table. Currently, I am working on implementing a delete optio ...

phphtmlformssql-delete

The default appearance of bootstrap-select appears to be flawed

Utilizing the amazing Bootstrap-select jQuery plugin has brought two unexpected default styles to my selectboxes. Despite inserting the necessary CSS and JS files into my website, all select boxes are displaying with these peculiar default settings (withou ...

jquerycsswordpressbootstrap-select

What is the process for verifying an md-select in Angular Material 2?

Hello everyone. I am currently building an app using Angular and incorporating Angular Material for the UI design. I am familiar with Angular validation techniques. For more information on form validation in Angular, you can visit this link. My questio ...

htmlangularvalidationinputangular-material2

Certain rows in the table should maintain a consistent width, while others are allowed to vary

I am dealing with a table containing certain rows Some of these rows are visible, while others are hidden. The visible rows at the start are referred to as: mainTrs. Clicking on a visible row will make all rows with a class matching its id visible. Cli ...

javascriptjquerycsshtml-table

Vuejs dropdown selections are not working as expected due to a bug

My dropdown menu is being populated with options based on an API response that looks like the following: {"value":"1371","label":"apple"},{"value":"1371","label":"banana"},{&qu ...

javascripthtmlcssvue.jsvue-directives

Troubleshooting issues with rowspan in a Datatable

I am currently utilizing jQuery DataTables to display my grid data and implementing the rowspan concept with the rowsGroup option. Initially, it works well by spanning some rows and looking visually pleasing, but eventually, it starts failing. Here are so ...

javascriptjqueryhtmldatatables

What is the best way to conceal a set of columns and reveal them upon clicking a header column?

Currently working with Bootstrap 3 and successfully split the top into two columns. I am aiming to replicate the design shown in the sample image without relying on JavaScript or jQuery. Upon clicking "Quick Info", there should be a new set of columns reve ...

htmlcsstwitter-bootstrap