3个内联块div之间的空格

时间:2013-04-14 00:50:20

标签: html

这是我的jsfiddle,我有一个非常基本的问题。 http://jsfiddle.net/DQL2U/

为什么三个标签之间有一个小空间(家里,关于我,联系方式)?我能做些什么让他们看起来相互联系?我发现这是一个经常遇到的问题,但无法找到解决方案。

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

2 个答案:

答案 0 :(得分:1)

将浮动设置为导航中的链接。

a {
    float:left;
}

答案 1 :(得分:0)

原因是因为标记中有空格。 By default the whitespace property is set to normal

  

<强>正常:   此值指示用户代理折叠白色序列   空格,并根据需要打破线条以填充线框。

有很多方法可以摆脱空间:float;在包含div的font-size: 0然后将其恢复到div中;甚至只是删除标记本身的空格。

http://jsfiddle.net/DQL2U/4/(从标记中删除了必要的空格)