Random margins appearing between list items

While working on my menu design, I've encountered an issue with unexplained margins between the list items that cannot be found in the developer's console. Here is the code snippet: HTML

<div class="navbar">
                <ul class="navbar_ul">
                    <li class="navbar_list_item navbar_main">Point Blank</li>
                    <li class="navbar_list_item navbar_main">Tanki Online</li>
                    <li class="navbar_list_item navbar_main">Dota 2</li>
                    <li class="navbar_list_item navbar_main">Warface</li>
                    <li class="navbar_list_item navbar_minor">Топ аккаунтов</li>
                    <li class="navbar_list_item navbar_minor navbar_last_item">О нас</li>
                </ul>
            </div>

And, here is the CSS:

.navbar_list_item {
        display: inline-block;
        }
.navbar, .navbar ul, .navbar li {
        text-align: center;
        padding: 0;
        }

    .navbar_ul {
        width: 100%;
        }

    .navbar_list_item {
        color: white;
        width: 16.3%;
        margin: 0;
        height: 40px;
        }

    .navbar_main {
        background-color: #3978C2;
        }

    .navbar_minor {
        background-color: #2E3A86;
        }

Check out the screenshot of the menu here: https://i.sstatic.net/c00EN.png Thank you!

Answer №1

It appears that the issue lies with the space and new line characters in between the </li> and <li> tags. You can correct the markup by formatting it like this:

<li>content</li><li>content</li><
li>another content</li><li>yet another one</li>

Answer №2

The issue arises due to a peculiar 'side effect' (which is actually quite confusing but is the intended behavior) of how the display: inline-block property functions. Inline block elements are treated similarly to inline elements, assuming they are part of a text line. This, coupled with HTML's compression of all whitespace characters into a single space, causes a small visible gap between elements as the newline characters between each LI are converted into space characters.

Various methods can be employed to combat this issue:

  • Applying negative margins to realign the elements
  • Using a zero-sized font
  • Using display: block with float: left
  • Utilizing display: table
  • Eliminating all whitespace characters between LIs in the code

Additionally, there are other techniques available, each with its own set of pros and cons.

For a more detailed exploration of different solutions, refer to the following resource: https://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer №3

There is no margin between the li elements. The spacing between each li is determined by the width property set to 16.3%.

   width: 16.3%;

Therefore, you have 6 li elements evenly spaced proportionally.

This indicates that the width for each element is consistent.

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 preventing HTML from triggering JavaScript when loaded inside a <div> with a script?

I'm working on creating a collapsible menu that I can easily customize on any page without the use of iframes. As someone new to web design, I have knowledge of CSS and HTML but I am currently learning JavaScript with limited experience in jQuery or A ...

Neatly incorporating a checkbox into a miniaturized image

I need help with the code snippet below, where I want each thumbnail image to have a checkbox overlay. I want the images to take up all the space in the table cell without any white space above. It is essential that the "left" and "right" divs are aligned ...

Styling JavaFX ChoiceDialog with CSS

I'm currently struggling with customizing the appearance of a ChoiceDialog in my JavaFX application using CSS. While I've successfully applied styles to other dialog panes, it seems that the ChoiceDialog is not responding as expected, possibly du ...

Using CSS to center the text and adding a separator line in blank spaces for a clean and stylish look

Request to Create Centered Date Element with Line Borders I am looking to design an element where the date is positioned at the center, while two horizontal lines fill the empty space on either side. Ideal Design I Want to Achieve: My Current Approach a ...

How to locate a specific element using Simple HTML DOM Parser

<div class="date">June<b>20</b><strong>friday</strong></div> Seeking to extract just the month from within this div, however the challenge lies in the fact that the month is not enclosed by any specific element. Is ther ...

Creating a PHP form

I am in the process of creating a simple inventory system and I would like to include a drop-down menu for users to select a part and input the quantity. The drop-down menu will be populated with items from a mySQL database. While I am comfortable with myS ...

Dynamic HTML DOM element name changes

One thing I'm considering is the process of dynamically changing element names in the DOM with JavaScript or jQuery when adding or removing child elements. For instance, if I decide to delete the second text box from a form that originally has three t ...

Unable to locate the element with the specified id: <path>

I am aiming to dynamically change the fill attribute of a specific <path> element when a page loads. Here is the detailed information about the path element: <path xmlns="http://www.w3.org/2000/svg" style="fill:#ff0000;stroke:#000000;stroke-wid ...

How can I fill the space around a centrally aligned div?

I'm looking to create a centered div with additional divs or spans on each side to fill the empty space. Currently, I am using margining to center the div and you can see the implementation in this example. HTML Code: <div id='A> <d ...

Internet Explorer experiencing difficulties displaying elements

On occasion, my website (find-minecraft-servers.com) may appear distorted in Internet Explorer. Sometimes, the number under Servers Listed in the green-ish banner fails to display correctly, despite being present in the source code. This issue seems to be ...

Using HTML to design interactive buttons that can send API requests and display their current status

Seeking assistance with creating buttons to control a remote light's ON and OFF states while reflecting their status as well. The specific http API calls for the light are necessary to toggle its state. Turn On = http://192.168.102.22:3480/data_requ ...

Swap two frames effortlessly with just a single click!

Is there a way to effortlessly change the contents of two frames with just one click? With a single click, I'd like to modify both "framename" and "framename2" by setting their href attribute to 'qwerty' and 'qwerty2' respectively ...

Understanding the behavior of Bootstrap input-groups when containing hidden sub elements

In a scenario where a button and an input field are enclosed within a div with a bootstrap class named input-group, they expand to occupy the entire width of the enclosing element. However, if the button is hidden, the input field unexpectedly contracts to ...

What is the purpose of making a "deep copy" when adding this HTML content?

My canvas-like element is constantly changing its contents. I am attempting to execute a function on each change that captures the current content and adds it to another element, creating a history of all changes. window.updateHistory = func ...

Flexbox problem - uneven heights

I have set up a flex box layout and you can view the codepen link here:- https://codepen.io/scottYg55/pen/zYYWbJG. My goal is to make the pink backgrounds in this flexbox 50% of the height, along with the background image so it resembles more of a grid sy ...

Discover the steps to trigger a Bootstrap popup modal when clicking on an anchor link using Angular

I have an Angular application and I would like to display a Bootstrap popup modal when the user clicks on a link in the footer. Here is the Bootstrap modal code: <button type="button" class="btn btn-primary" data-toggle="modal&q ...

Modifying the div based on the color it is positioned in front of

I am attempting to create a sticky, transparent div that changes its color based on the background behind it. I have both dark and light colored divs, and I want the sticky div to adjust its text color accordingly (white on dark backgrounds, black on light ...

Having trouble with inserting data into MySQL database using PHP?

I am currently facing an issue while attempting to insert data into a MySQL database. Although no errors are appearing during the process, when I try to browse the data, it doesn't seem to be getting inserted into the database. Below is my code, could ...

What content appears post-iframe?

After researching for a while, I've only come across information about text displayed after a broken iframe on this topic. However, what I actually want to do is display text below an iframe set at 90% height, like so: https://i.sstatic.net/KHXI3.png ...

What is the best way to create a clickable background for a modal window?

I am looking to add a chatbox feature to my website and have been utilizing Bootstrap Modal for this purpose. My goal is to keep the modal open even when the user clicks outside of it, while still allowing them to interact with the background of the websi ...