Tutorial :How to get rid of an unwanted space in a tab menu?


I am using asp.net mvc and I am working on a tab menu which is displaying an unwanted space between each tab. This only happens when I have each image tag on its own line as opposed to having it all in one.

alt text

The top images are on their own line which is what is causing the unwanted space:

        <img src="/Content/Images/Reports_white.png"/>          <img src="/Content/Images/Audit_white.png"/>          <img src="/Content/Images/Messages_white.png"/>          <img src="/Content/Images/Admin_white.png"/>    

versus the desired effect on the bottom half of the image:

        <img src="/Content/Images/Reports_white.png"/><img src="/Content/Images/Audit_white.png"/> ...  

How can I get rid of this space without having to keep them all on one line?


I'd contain your tab images in an unordered list like this:


ul.tabs  {  list-style:none;  padding:0px;  margin:0px;  }    ul.tabs li  {  padding:0px;  margin:0px;  float:left;  }  


<ul class="tabs">  <li><img src="/Content/Images/Reports_white.png"/></li>  <li><img src="/Content/Images/Audit_white.png"/></li>  <li><img src="/Content/Images/Messages_white.png"/></li>  <li><img src="/Content/Images/Admin_white.png"/></li>  </ul>  

That way you can control the spacing using padding or margin.


one technique is to do

    <img src="/Content/Images/Reports_white.png"      /><img src="/Content/Images/Audit_white.png"      /><img src="/Content/Images/Messages_white.png"      /><img src="/Content/Images/Admin_white.png"/>  


Since you will probably want the tabs to be clickable you will need to add some elements DIV for example around the images. Make sure those elements have no margins and you can have whitespace inbetween the divs in the source no problem.

    <div><img src="/Content/Images/Reports_white.png"/></div>      <div><img src="/Content/Images/Audit_white.png"/></div>      <div><img src="/Content/Images/Messages_white.png"/></div>      <div><img src="/Content/Images/Admin_white.png"/></div>  


Any space between tags, e.g. a new line, are interpreted as white space. This only really affects inline elements, which <img> elements are so hence your problem.

You could also try adding float: left to the elements which will stack them horizontally without any spacing. Presumably you're actually implementing these as hyperlinks, we'd have to see the exact markup to suggest a specific solution for it.


Short answer: Remove the spaces between the img tags and make sure they have no margins.

If you don't want to bother about having spaces in the HTML, take some time to make them float:left, contained in a div (overflow:hidden will get its height correct).

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »