Question

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.

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?

Answer 1

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

CSS:

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

ul.tabs li
{
padding:0px;
margin:0px;
float:left;
}

HTML:

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