What is causing the margin between each menu list item in this code?

CSS and HTML below /*Initialize*/ ul#menu, ul.sub-menu { padding:0px; margin: 0px; } ul#menu li, ul#menu ul.sub-menu li { list-style-type: none; display: inline-block; } /*Link Appearance*/ ul#menu li a, ul#menu li ul.sub-menu li a { text-decoration: none; color: #00B0F0; background-image:url(../images/menubg2.jpg); padding: 5px 15px 5px 5px; display:inline-block; margin:0px; } /*Make the parent of sub-menu relative*/ ul#menu li { position: relative; } /*sub menu*/ ul#menu li ul.sub-menu { display:none; position: absolute; left: 0; width: 150px; } ul#menu li:hover ul.sub-menu { display:block; } --------------------------- <div id="menu holder"> <ul id="menu"> <li><a href="#">Home</a> <ul class="sub-menu"> <li> <a href="#">Sub Menu 1</a> </li> <li> <a href="#">Sub Menu 2</a> </li> <li> <a href="#">Sub Menu 3</a> </li> <li> <a href="#">Sub Menu 4</a> </li> </ul> </li> <li><a href="#">About Us</a> <ul class="sub-menu"> <li> <a href="#">What we do</a> </li> <li> <a href="#">Why Weblab</a> </li> <li> <a href="#">Who are we</a> </li> </ul> </li> <li><a href="#">Clients and Results</a> <ul class="sub-menu"> <li> <a href="#">Case studies</a> </li> <li> <a href="#">Industries</a> </li> </ul> </li> <li><a href="#">Our Method</a> <ul class="sub-menu"> <li> <a href="#">Sub Menu 1</a> </li> <li> <a href="#">Sub Menu 2</a> </li> <li> <a href="#">Sub Menu 3</a> </li> <li> <a href="#">Sub Menu 4</a> </li> </ul> </li> <li><a href="#">Our Services</a> <ul class="sub-menu"> <li> <a href="#">Conversion audit</a> </li> <li> <a href="#">Conversion optimisation</a> </li> </ul> </li> <li><a href="#">Blog</a> <ul class="sub-menu"> <li> <a href="#">Sub Menu 1</a> </li> <li> <a href="#">Sub Menu 2</a> </li> <li> <a href="#">Sub Menu 3</a> </li> <li> <a href="#">Sub Menu 4</a> </li> </ul> </li> <li><a href="#">Conversion Tips</a> <ul class="sub-menu"> <li> <a href="#">Sub Menu 1</a> </li> <li> <a href="#">Sub Menu 2</a> </li> <li> <a href="#">Sub Menu 3</a> </li> <li> <a href="#">Sub Menu 4</a> </li> </ul> </li> <li><a href="#">Contact</a> <ul class="sub-menu"> <li> <a href="#">Sub Menu 1</a> </li> <li> <a href="#">Sub Menu 2</a> </li> <li> <a href="#">Sub Menu 3</a> </li> <li> <a href="#">Sub Menu 4</a> </li> </ul> </li> </ul> </div>
Answer:

>li> is an inline-block here. If there is a gap between the <li>s, this problem happens. The fix is to write the end tag </li> and the next start tag <li> in one line. </li><li><a href="#">About Us</a>

Was this solution helpful to you?

Other answers

When deciding on the spacing between elements, browsers typically treat inline-block elements as "text", and assume that you want spacing in between them. In most situations this makes sense. For example, say you had some html like this: Lorem ipsum sit <span>dolor</span> <span>amet</span> When this is rendered, you'll get something like this displayed on your page: Lorem ipsum sit dolor amet Note the single space between dolor and amet. How did it get there? If you look, it's not actually in our html code. All we did was write one span, then go to the next line, then write another. So it seems like there should maybe either be no space (since all we did was go to the new line) or maybe amet should be on the next line entirely, exactly like in the code. In fact, it's neither. What's happening here is that the browser is essentially saying "there was some whitespace (in this case a newline character) in between the first span and the second span in the code, so we're going to assume you probably just wanted a single space there". As I said earlier, this is a correct assumption in the majority of cases, and the result is that most people don't even realize that the browser is doing this. Where it can get a little bit confusing is when you start trying to make custom things (like the menu you're making) that aren't just blocks of text. Then the assumptions start to break down. In your case, each of your main <li>'s is set to display: inline-block. I'm not going to go into too many specifics regarding inline vs block other than to say that inline-block is sort of in between the two, and that browsers treat it more or less like text when it comes to layout. The result is that inline-block elements have this automatic space introduced between them as long as there as whitespace in the code, just like our example with the <span>'s earlier. This whole fiasco is actually a pretty well known quirk of CSS. Oh right, you actually wanted to know how to fix it. Well, you're in luck, I've actually written another answer on Quora that covers this: Hope that helps.

Dillon Grove

Related Q & A:

how can I check when the last list item has been deleted?Best solution by SharePoint
What's causing warnings when clicking a link in a newsletter/email message?Best solution by Webmasters
What is causing my fuzzy/vibrating computer screen?Best solution by Yahoo! Answers
What is causing an allergic reaction?Best solution by Yahoo! Answers
What is causing this jaw pain and what can I do about it?Best solution by medicinenet.com

Just Added Q & A:

How many active mobile subscribers are there in China?Best solution by Quora
How to find the right vacation?Best solution by bookit.com
How To Make Your Own Primer?Best solution by thekrazycouponlady.com
How do you get the domain & range?Best solution by ChaCha
How do you open pop up blockers?Best solution by Yahoo! Answers

For every problem there is a solution! Proved by Solucija.

Got an issue and looking for advice?
Ask Solucija to search every corner of the Web for help.
Get workable solutions and helpful tips in a moment.

Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.