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

Answer 1

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"/>

Answer 2

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>

Answer 3

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.

Answer 4

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

Answer 5

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.