Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Oct 2009
    Posts
    189
    Thanks
    38
    Thanked 3 Times in 3 Posts

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

    Hey all,

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

    Code:
    #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:

    Code:
    <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.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,951
    Thanks
    9
    Thanked 724 Times in 718 Posts
    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.

  • Users who have thanked SB65 for this post:

    johnmerlino (07-06-2012)


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •