Nonsensical Padding in HTML List

Question

I have an HTML list, like millions of others I have made ...and the way it is behaving is just really confounding me.

Basically there is just this invisible padding on the right side of each element. I can't tell if it is on the hyperlink, the list item, or what... but this is everything I have, for your evaluation.

Screenshots

Behavior

Actual Behavior Chrome Inspection

HTML

<body>
    <br class="space" />
    <div class="container">
        <nav id="menu">
            <ul>
                <li><a href="#">First</a></li>
                <li><a href="#">Second</a></li>
                <li><a href="#">Third</a></li>
            </ul>
        </nav>
        <div id="main">
            @RenderBody()
        </div>
    </div>
</body>
</html>

CSS

body {
    background-color: #5C87B2;
    font-family: Arial;
    font-size: 80%;
}
#menu { 
    background-color: #E0E0E0; 
    border: solid 1px #000;
    text-align: right; 
}
#menu ul { margin: 0; padding: 0; display: block; }
#menu ul li { 
    display: inline-block;
    position: relative;
    vertical-align: top;
}
#menu ul li a {
    padding: 5px 20px;
    font-weight: bold;
    text-decoration: none;
    line-height: 1.8em;
    display: block;
    border: 0px solid #000;
    border-width: 0 0 0 1px;
}
#menu ul li a:hover{
    background-color: #fff;
}
#main { 
    background: white; 
    padding: 15px; 
    border-left: solid 1px #000; 
    border-right: solid 1px #000; 
    border-bottom: solid 1px #000;
    overflow: auto;
}

/* --------------------------------------------------------
    the content positioning and styling containers
-----------------------------------------------------------*/
#content { padding: 10px 0 0 0; clear: both; }

Reset CSS

body { margin: 0; padding: 0; border: 0; }
/* --------------------------------------------------------
    remove the floating dots on list elements within
    navigation containers
-----------------------------------------------------------*/
nav ol, nav ul { list-style:none; }

/* --------------------------------------------------------
    clear floating styles and make sure that certain
    things fit within appropriate bounding boxes.
-----------------------------------------------------------*/
.clear      { clear: both; }
.clearfix   { overflow: auto; margin: 0; padding: 0; }
.space      { position: relative;  top: 5px; }
.padded     { padding: 10px; }
/* --------------------------------------------------------
    allow class level placement of floating styles.
-----------------------------------------------------------*/
.right  { float: right; } 
.left   { float: left; }
/* --------------------------------------------------------
    some default layout elements.
-----------------------------------------------------------*/
hr {
    display:block;
    height:1px;
    border:0;   
    border-top: 1px solid #2A2A2A;
    padding:0;
}
/* --------------------------------------------------------
    the default content container
-----------------------------------------------------------*/
.container {
    width: 1024px;
    min-width: 990px;
    margin: 0 auto;
    position: relative;
}
code { font-size: 1.2em; }
a:link, a:visited, a:active { color: inherit; text-decoration: none; }

This question might help: http://stackoverflow.com/questions/6213354/how-can-i-eliminate-spacing-between-inline-elements-in-css/6213787#6213787 — thirtydot, Jun 02 '11 at 18:55

Brett · Accepted Answer · 2011-06-02T18:56:02.540

3

You have whitespace between you <li> elements, remove that and no more odd space in the UI. The return that you have causes this.

I created a http://jsfiddle.net/59sTg/1/ to show you that it works without the whitespace.

Ultimately this is a result of the display:inline-block; attribute. One of many ways of solving this (besides just removing the whitespace/return is by using float:left instead of display:inline-block. Alternatively, if you want to keep it exactly how it is, sometimes using comments can help with formatting

<li>someLink</li><!-- 
--><li>secondLink</li>

edit: I updated the jsfiddle to include both methods (the latter shows you how to float, using a class called myfloatedelement, albeit I would recommend re-organizing the CSS/classes a bit, I did it pretty quick and dirty)

<nav id="menu" class="myfloatedelement">
 <ul>
  <li><a ref="#">First</a></li>
  <li><a href="#">Second</a></li>
  <li><a href="#">Third</a></li>
 </ul>
</nav>

--

.myfloatedelement{
 overflow:auto;
}
.myfloatedelement ul{
 float:right;
 overflow:auto;
}
.myfloatedelement ul li{
 float:left;
}

edited Jun 02 '11 at 18:56

answered Jun 02 '11 at 18:45

Brett

4,051
2
26
39

I do not have any whitespace. They are just straight up carriage returns. – Ciel Jun 02 '11 at 18:47
Alright. I fixed it by changing the `display: inline-block` to `float: left` on the `ul li`, and changing the `ul` to have `overflow: auto;'. Thanks. This is a ridiculous bug. From day 1 of programming, you're taught that whitespace is irrelevant. – Ciel Jun 02 '11 at 18:54
@Ciel unfortunately white-space is in use all over the web to create space between links, spacers, etc. The way you have to avoid them is the `float` method as a general rule. I understand your pain. – Brett Jun 02 '11 at 19:00
Your fiddle really helped. Thanks. – Ciel Jun 02 '11 at 19:02
1

@Ceil: tabs are whitespace characters, in HTML whitespace can be relevant. "From day 1 of programming, you're taught that whitespace is irrelevant" - this isn't really true, there are many languages where whitespace does matter (Python being one example). – JMason Jun 02 '11 at 19:04
@JMason - good call on the tabs, definitely forgot about those – Brett Jun 02 '11 at 19:05

score 1 · Answer 2 · answered Jun 02 '11 at 18:53

This is usually easy enough to fix but there are a few elements which could be applying the padding/margin - the easiest way to tell is by using chrome and hovering over the html code using the "inspect element" feature (right click to find it) - one of the elements in the document will visibly appear to have padding/margin which corresponds to that which we see in your screenshot

My first guess is to ask what happens if you float each link to the left?

#menu ul li a {
    float: left;
    display: block;
  }

failing that, what happens if you set:

#menu ul li{
  display: block;
  float: left;
}
#menu ul{
  overflow: auto;
}

Yes, this is how I ended up fixing it. Again, this is a really stupid bug. I don't know, perhaps I am just frustrated because it's been bothering me for a few hours. Thanks again for all of your help. — Ciel, Jun 02 '11 at 18:57

Nonsensical Padding in HTML List

Screenshots

Behavior

HTML

CSS

Reset CSS

2 Answers2