CSS - <Li> Items in Horizontal Menu Have a Gap Between Them

CSS - li Items in Horizontal Menu have a Gap Between Them

You're using display: inline. That means that whitespace characters between each of those li elements are respected, and will be collapsed into a single space. If you need to, you can try using floats instead, or remove all whitespace between those elements.

 <ul id="menu">              
     <li><a href="http://example.com"></a>
     </li><li><a href="http://example.com"></a>
     </li><li><a href="http://example.com"></a></li>
 </ul>

would work, or if you're inclined to using floats,

#menu li {
    float: left;
}

instead of display: inline

Having trouble increasing spacing between horizontal menu items with CSS

try

a { 
    display: block;
    padding: 10px 30px;
}

---

edit

Do you want something like this ? http://jsfiddle.net/Y8Ng7/

Just remove that ridiculous margin you have for the nav and increase the li padding

li {
    display:inline;
    padding: 10px 40px;
}

To center a div element, don't do margin: 21px 646px 21px 646px;

just do margin: 21px auto;

CSS/HTML - Horizontal list - Remove this mystery gap between list items?

The gap is caused by the tabs and line feeds separating your list items; inline block elements (or any element that participates within the inline formatting context) are sensitive to their structure in your HTML.

You can either remove the spaces completely:

 <ul>
    <li class="selectedPage"><a href="#">HOME</a></li><li><a href="#">PAGE1</a></li<li><a href="#">PAGE2</a></li>
</ul>

Use comments:

<div class="nav">
    <ul>
        <li class="selectedPage"><a href="#">HOME</a></li><!--
        --><li><a href="#">PAGE1</a></li><!--
        --><li><a href="#">PAGE2</a></li><!--
    --></ul>
<!-- end .nav --></div>

Leave the HTML alone and use float instead (and clear the container):

.nav ul li {
    float: left;
  /*display: inline-block;*/
}

.nav ul {
    overflow: hidden;
}

Or set font-size: 0; on the parent and then reset it on the li

.nav ul {
    font-size: 0;
}

.nav li {
   display: inline-block;
   font-size: 16px;
}

---

^{Also, take a look at both: How to remove the space between inline-block elements? & http://css-tricks.com/fighting-the-space-between-inline-block-elements/}

How to get rid of white space between css horizontal list items?

You need to use display:block and float:left on the lis to remove the space. When they're inline the browser treats them as words, and so leaves space in between.

Also see my similar question.

Add space between li elements

UPDATE 2021

My original answer was from 2012 when many of the Level 3 CSS Selectors did not exist. To achieve this we would need JS or other explicit CSS styles/classes to achieve it. As @AlphaX has pointed out the best solution now is simply

li.menu-item:not(:last-child) { 
   margin-bottom: 3px;  
}

OLD ANSWER

add:

margin: 0 0 3px 0;

to your #access li and move

background: #0f84e8; /* Show a solid color for older browsers */

to the #access a and take out the border-bottom. Then it will work

Here: http://jsfiddle.net/bpmKW/4/

css horizontal navigation spacing

I've had this happen to me. Unfortunately it is caused by the browser taking the line breaks between the list items and rendering them as spaces. To fix, change your HTML to:

<div id="footer">
  <ul>
    <li><a href="one.html">One</a></li><li><a href="two.html">Two</a></li><li><a href="three.html">Three</a></li><li><a href="four.html">Four</a></li><li><a href="five.html">Five</a></li>
  </ul>
</div>

Remove Gaps Between Items in CSS Menu

You can add empty comments between list items

<li class="active"><a href="/">Home</a></li><!--
--><li><a href="/about/">About</a></li>

Here is a sample

Horizontal list items - fit to 100% with even spacing

The new CSS flexbox specification would be the solution to your problem :)

ul {    display: flex;    align-items: stretch; /* Default */    justify-content: space-between;    width: 100%;    background: #cacaca;    margin: 0;    padding: 0;}li {    display: block;    flex: 0 1 auto; /* Default */    list-style-type: none;    background: #fafafa;}

<ul>    <li>This is menu item 1</li>    <li>Number 2</li>    <li>Item Number 3</li>    <li>Menu 4</li></ul>

---

Related Topics