1

可能很明显，我对 html 和 css 很陌生。我最近学习了它们（和 django 一起），并且一直在使用我自己的代码并从各种教程中借用片段。产生你在下面看到的科学怪人的缺点之一是神秘的异常往往会从湛蓝的天空中显现出来。最近和令人困惑的是我的一些 div（顶部的两个）之间的一个很小的空白区域。我一直在寻找罪魁祸首，但至今收效甚微。如果有人可以看一看并提供建议，那就太棒了。

这是我的HTML：

<head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title> BTracker </title>
        <link rel="stylesheet" type="text/css" href="test.css">
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster" />

    </head>

    <body>
        <div id="page-container">
            <div style="background:red">
            div1
            </div>
            <div>
                <ul id="navTop">
                    <li>Hi, <strong><a href="/UserName/">UserName</a></strong></li>
                    <li><a href="/help/">Help</a></li>
                    <li><a href="/account/settings/">Settings</a></li>
                    <li class="last"><a href="/account/logout/">Logout</a></li>
                </ul>
            </div>
            <div id="main-nav">
                    <nav>       
                        <ul class="nav">
                            <li><a href="/home/" class="homeIcon">Home</a></li>
                            <li><a href="/news/">News</a></li>
                            <li><a href="/about/">About Us</a></li>
                            <li><a href="/services/">Services</a></li>  
                            <li><a href="/contact/">Contact</a></li>        
                        </ul>
                    </nav>
            </div>
            <div id="header">
            </div>
            <div id="sidebar-a">
                <div class="padding">
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. 
                    Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus. 
                    Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus 
                    euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio. 
                    Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget, 
                    purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
                </div>
            </div>
            <div id="content">
                <div class="padding">
                    <h2><img src="path/to/about.gif" width="150" alt="About" /></h2>
                    <p><strong>Lorem ipsum</strong>  dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. 
                    Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus. 
                    Donec in sapien in nibh rutrum gravida.</p>
                    <p>Sed ut mauris. Fusce malesuada enim vitae lacus 
                    euismod vulputate.</p>

                    <h2><img src="/path/to/contact.gif" width="250"  alt="Contact Us" /></h2>
                    <p>Phone:   (07) 867 5309<br />
                    Fax:     (07) 867 5309<br />
                    Email:   <a href="mailto:foo@bar.com">foo@bar.com</a><br />
                    P.O Box: 12345 Timbuck, Too</p>
                    <p><a href="#">More contact informationż/a></p>
                </div>
            </div>
            <div id="footer">
                <div id="altnav">
                    <a href="#">About</a> - 
                    <a href="#">Services</a> - 
                    <a href="#">Portfolio</a> - 
                    <a href="#">Contact Us</a> - 
                    <a href="#">Terms of Trade</a>
                </div>
                Copyright BlahBlah Webservices
                <br>
                Powered by Yours Truely
            </div>
        </div>

    </body>

</html>

这是我的CSS：

/*------------------------------------------------------------------
[ STYLE.CSS ] Main Stylesheet
--------------------------------------------------------------------

[Table of Contents]

1.      Link colors

2.      MAIN STYLES
2.a     Tags defaults
2.b     Page Container
2.b     Navigations


/*------------------------------------------------------------------

1.  Link colors

------------------------------------------------------------------*/

a:link {color:white;}      /* unvisited link */
a:visited {color:blue;}  /* visited link */
a:hover {color:grey;}  /* mouse over link */
a:active {color:yellow;}  /* selected link */

/*------------------------------------------------------------------

2.  MAIN STYLES
    General definitions

--------------------------------------------------------------------

/*-------------------------------
2.a Tags defaults
-------------------------------*/

html { 
    background: url("/path/to/background.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

body {
    font-family: Helvetica, Arial, Verdana, Sans-serif;
}

h1 {
    margin: 0;
    padding: 0;
    float: right;
    margin-top: 35px;
    padding-right: 200px;
}

div {margin:0;padding:0;}

/*-------------------------------
2.b Container
-------------------------------*/

#page-container {
    width: 1000px;
    margin: auto;
    /* color: #979731; */
    background: black;
}

/*-------------------------------
2.c Navigation
-------------------------------*/


#navTop {
    text-align: right;
    height:32px;
    background: rgba(151, 111, 48, .4);
    background:violet;
}

    #navTop li {
        display: inline-block;
        list-style-type: none;
        border-right: 1px solid #d1d1d1;
        height: 8px;
        line-height:8px;
        padding: 0 5px;
    }
    #navTop li.last { border: 0; }

#main-nav {
    height: 85px;
    background: blue;
    text-align: center;
}

.nav{
    /* Affects the UL element */
    overflow: hidden;
    display: inline-block;
}

    .nav li{
        /* Specifying a fallback color and we define CSS3 gradients for the major browsers: */

        background-color: #f0f0f0;
        background-image: -webkit-gradient(linear,left top, left bottom,from(#fefefe), color-stop(0.5,#f0f0f0), color-stop(0.51, #e6e6e6));
        background-image: -moz-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
        background-image: -o-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
        background-image: -ms-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
        background-image: linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);

        border-right: 1px solid rgba(9, 9, 9, 0.125);

        /* Adding a 1px inset highlight for a more polished efect: */

        box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
        -moz-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
        -webkit-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;

        position:relative;

        float: left;
        list-style: none;
    }

    .nav li:after{

        /* This creates a pseudo element inslide each LI */ 

        content:'.';
        text-indent:-9999px;
        overflow:hidden;
        position:absolute;
        width:100%;
        height:100%;
        top:0;
        left:0;
        z-index:1;
        opacity:0;

        /* Gradients! */

        background-image:-webkit-gradient(linear, left top, right top, from(rgba(168,168,168,0.5)),color-stop(0.5,rgba(168,168,168,0)), to(rgba(168,168,168,0.5)));
        background-image:-moz-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
        background-image:-o-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
        background-image:-ms-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
        background-image:linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));

        /* Creating borders with box-shadow. Useful, as they don't affect the size of the element. */

        box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
        -moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
        -webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;

        /* This will create a smooth transition for the opacity property */

        -moz-transition:0.25s all;
        -webkit-transition:0.25s all;
        -o-transition:0.25s all;
        transition:0.25s all;
    }

    /* Treating the first LI and li:after elements separately */

    .nav li:first-child{
        border-radius: 4px 0 0 4px;
    }

    .nav li:first-child:after,
    .nav li.selected:first-child:after{
        box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
        -moz-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
        -webkit-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;

        border-radius:4px 0 0 4px;
    }

    .nav li:last-child{
        border-radius: 0 4px 4px 0;
    }

    /* Treating the last LI and li:after elements separately */

    .nav li:last-child:after,
    .nav li.selected:last-child:after{
        box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
        -moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
        -webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;

        border-radius:0 4px 4px 0;
    }

    .nav li:hover:after,
    .nav li.selected:after,
    .nav li:target:after{
        /* This property triggers the CSS3 transition */
        opacity:1;
    }

    .nav:hover li.selected:after,
    .nav:hover li:target:after{
        /* Hides the targeted li when we are hovering on the UL */
        opacity:0;
    }

    .nav li.selected:hover:after,
    .nav li:target:hover:after{
        opacity:1 !important;
    }

    /* Styling the anchor elements */

    .nav li a{
        color: #5d5d5d;
        display: inline-block;
        font: 20px/1 Lobster,Arial,sans-serif;
        padding: 12px 35px 14px;
        position: relative;
        text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
        z-index:2;
        text-decoration:none !important;
        white-space:nowrap;
    }

    .nav a.homeIcon{
        background:url("/path/to/home.png") no-repeat center center;
        display: block;
        overflow: hidden;
        padding-left: 12px;
        padding-right: 12px;
        text-indent: -9999px;
        width: 16px;
    }

 #header {
    height: 130px;
    background:red;
}

#sidebar-a {
    float: right;
    width: 500px;
    line-height:25px;
    background:purple;
} 

    #sidebar-a .padding {
        padding: 25px;
}

#content {
    margin-right: 500px;
    line-height: 25px;
    background: orange;
}

    #content .padding {
        padding: 25px;
}

    #content h2 {
        margin: 0;
        padding: 0;
        padding-bottom: 15px;
        padding-left: 150px
    }

    #content p {
        margin: 0;
        padding: 0;
        padding-bottom: 15px;
    }

#footer {
    clear: both;
    height: 66px;
    border-top:1px solid #efefef;
    padding: 13px 25px;
    line-height:20px
    font-family: Tahoma, Arial, Helvetica, Sans-serif;
    font-size: 16px;
    color: white;
    background: green;
}

    #footer #altnav {
        width: 400px;
        float: right;
        text-align: right;
}

.hidden {
    display: none;
}
4

2 回答 2

1

具有属性的元素inline-block将表现得好像它们是内联的（因此得名），因此遇到的任何空格都将被视为空格。例如：

<div></div><div></div>

将以不同的方式呈现

<div></div>
<div></div>

在此处查看实时示例

您可以使用 HTML 解决此问题，如下所示：

要么将所有元素放在同一行，即

<div>
    // CONTENT
</div><div>
    // CONTENT
</div><div>
    // CONTENT
</div>

或使用 HTML 注释删除空格

<div>
    //CONTENT
</div><!--
--><div>
    //CONTENT
</div>

您可以使用 CSS 解决此问题，如下所示：

在父节点上设置属性font-size: 0，即

parent {
    display: inline-block;
    font-size: 0
}
parent * {
    font-size: 12px
}

或者在父节点上设置属性zoom: 1，即

parent {
    display: inline-block;
    zoom: 1
}
于 2012-11-17T15:47:21.223 回答
0

那么你好，

在我作为 Web 开发人员的早期，我也遇到了这个问题。问题是渲染了一个字符（空格，每行上有很多空格-标签缩进）。您可以通过设置来摆脱这个问题：

body {
    font-size: 0px;
}

* {
    font-size: inherit;
}

然后font-size为显示文本所需的每个元素设置 css 属性。

希望它有所帮助；）

于 2012-11-17T15:47:25.670 回答