Spaces between 3 inline-block divs

Question

Here is my jsfiddle, and i have a very basic question. http://jsfiddle.net/DQL2U/

Why there is a small space between three tabs (home, about me, contact)? What can I do to make them look joined each other? I see this is a problem that encountered often, but couldnt find a solution.

<!DOCTYPE html>

<html>
    <head>
        <title>
            Burak Özmen - A Newbie Web Designer
        </title>
        <link rel="stylesheet" href="index.css"/>
    </head>

    <body>
        <nav>
            <a href="http://www.facebook.com">
                <div id="home">
                    <p>Home</p>
                </div>
            </a>
            <a href="">
                <div id="about">
                    <p>About Me</p>
                </div>
            </a>
            <a href="">
                <div id="contact">
                    <p>Contact</p>
                </div>
            </a>
        </nav>
    </body>

</html>

score 1 · Accepted Answer · answered Apr 14 '13 at 00:52

1

set float to your links in your nav.

a {
    float:left;
}

answered Apr 14 '13 at 00:52

trajce

1,480
3
23
38

Worked like charm after extending the widths of #home, #about and #contact. Thanks! – Burak Özmen Apr 14 '13 at 00:55

score 0 · Answer 2 · answered Apr 14 '13 at 01:05

The reason is because of the whitespace in your markup. By default the whitespace property is set to normal.

normal: This value directs user agents to collapse sequences of white space, and break lines as necessary to fill line boxes.

There's many ways to get rid of the spaces: float; font-size: 0 on the containing div then reverting it back inside the div; or even just deleting the whitespaces in the markup itself.

http://jsfiddle.net/DQL2U/4/ (deleted necessary whitespace from markup)

Spaces between 3 inline-block divs

2 Answers2