why is it necessary to apply negative margin to inline list items

[johnmerlino]

Hey all,

After trying to get my tabs to work right, I ended up with this css:

#tabs ul {
	list-style-type: none;
	/* push list items against container*/
	padding:0;
	margin:0; 
}

#tabs li {
	display: inline;
	border: solid;
	border-width: 1px 1px 0 1px; /* no bottom border */
	margin: 0;
}

#tabs li a {
	/* pad the link rather than list so entire area clickable */
	padding: 0 1em;	
}


#tabs li {
	/* apply color to list itself, since it is element connected to content div*/
	background: #E0E0E0;
	/* remove gap in tabs*/
	margin-right: -5px;	
}

#tabs li.active {
	/* change background of active link to blend into content */
	background: #fff;
	/* vertical padding in inline elements doesn't push anything out of way*/
	padding-bottom: 1px;
}



#tabs div {
	/* border to content area to make it appear part of tabs*/
	border: 1px solid;
}

This is structure of markup:

<div id="tabs">
	<ul>
		<li><a href="#tabs-1">Nunc tincidunt</a></li>
		<li><a href="#tabs-2">Proin dolor</a></li>
		<li><a href="#tabs-3">Aenean lacinia</a></li>
	</ul>
	<div id="tabs-1">
		<p>Proin elit arcu</p>
	</div>
	<div id="tabs-2">
		<p>Morbi tincidunt</p>
	</div>
	<div id="tabs-3">
		<p>Dlectus hendrerit hendrerit.</p>
	</div>
</div>

My question is if I don't apply the -5 margin-right to the li elements, then a gap appears between them. Why is that? After all, they are supposed to be displayed inline with a margin set to 0, so I don't know where this gap comes from.

[SB65]

The gap between inline elements comes from the browser rendering the whitespace between the li elements in your markup - the same way that it would render whitespace between words, for example.

So, you can eliminate the gaps by removing the whitespace between your li elements. Or you make the lis block elements and float them.

However, there's nothing really wrong with the metod you've adopted.