logo标签列表

BODY 前面需要空格吗？

htmlspace
3

我似乎解决不了我的问题，因为我在 BODY 前面有一个空格。

<html>
    <head>
        <link rel='stylesheet' type='text/css' href='style.css' />
        <link rel='shortcut icon' href='img/favicon.ico' />
    </head>
    <body>
        <div name='header_area'>
            <div class='wrapper'>
                <div class='content'>
                    <table class='header_table'>
                        <tr>
                            <td class='table_cell_left'>
                                <a href='index.php'><img src='img/logo.png' /></a>
                            </td>
                            <td class='table_cell_right'>
                                Derp
                            </td>
                        </tr>
                    </table>
                </div>
                <div name='navigation'>
                    <ul class='nav'>
                        <li><a class='nav_link' href='index.php'>HOME</a></li>
                        <li><a class='nav_link' href='?action=forum'>FORUM</a></li>
                        <li><a class='nav_link' href='?action=server'>SERVER</a></li>
                        <li><a class='nav_link' href='?action=donate'>DONATE</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div name='content_area'>
            <div class='wrapper'>
                <div class='content_area_box'>
                    test
                </div>
            </div>
        </div>
    </body>
</html>

样式表：

@charset "utf-8";
/* CSS Document */

* {
    margin:0;
    padding:0;
}

body {
    width:100%;
    font-family:'Calibri';
    font-size:16px;
    background-image:url('img/pattern.png');
    background-repeat:repeat;
    background-color:#F0F2F3;
}
.wrapper {
    margin:0 auto;
    width:900px;
}
.content {
    margin:10px;
}
.header_table {
    width:100%;
    border:none;
    margin:30px auto;
}
.table_cell_left {
    text-align:left;
    vertical-align:middle;
}
.table_cell_right {
    text-align:right;
    vertical-align:middle;
}
.textbox {
    padding:2px;
    height:22px;
    border:1px solid #CCCCCC;
    background-color:#FFFFFF;
    color:#000000;
}
.button {
    cursor:pointer;
    height:22px;
    padding:2px 6px;
    border:1px solid #CCCCCC;
    background-color:#FFFFFF;
    color:#000000;
    -webkit-transition: background 0.4s linear, color 0.4s linear;
    -moz-transition: background 0.4s linear, color 0.4s linear;
}
.button:hover, .button:focus {
    background-color:#99CCCC;
    color:#FFFFFF;
    -webkit-transition: background 0.4s linear, color 0.4s linear;
    -moz-transition: background 0.4s linear, color 0.4s linear;
}
.link:link, .link:visited {
    color:#003399;
    text-decoration:none;
}
.link:hover, .link:active, .link:focus {
    color:#FF9933;
}
.nav {
    list-style-type:none;
    overflow:hidden;
    background-color:#FFFFFF;
    border:1px solid #CCCCCC;
}
.nav li {
    float:left;
}
.nav_link:link, .nav_link:visited {
    float:left;
    border-right:1px solid #CCCCCC;
    padding:10px 25px;
    color:#000000;
    background-color:#FFFFFF;
    text-decoration:none;
    font-weight:bold;
    -webkit-transition:background 0.4s linear, color 0.4s linear;
    -moz-transition:background 0.4s linear, color 0.4s linear;
}
.nav_link:hover, .nav_link:active, .nav_link:focus {
    background-color:#99CCCC;
    color:#FFFFFF;
    -webkit-transition:background 0.4s linear, color 0.4s linear;
    -moz-transition:background 0.4s linear, color 0.4s linear;
}
.content_area_box {
    background-color:#FFFFFF;
    border-left:1px solid #CCCCCC;
    border-bottom:1px solid #CCCCCC;
    border-right:1px solid #CCCCCC;
}

这是我得到的结果图片。我不希望它有空格，我希望它从顶部开始。在我测试的每个浏览器中都会出现这种情况。
这是较低元素之一的边距，可能是“内容”。使用Firebug在浏览器中很容易检查。容器元素内部元素的边距可能会延伸到父容器的边界之外。 - Mörre
我从样式表中删除了.content，但结果仍然相同？ :/ - user1768788
1
好的，使用Firefox和Firebug，在HTML视图中检查所有元素，它会突出显示光标下的元素的填充和边距。只需要20秒钟即可识别有问题的元素。我当然可以为您完成这项任务 - 但是教你如何钓鱼比直接给你鱼更好 :) 你可以自己解决这个问题。 - Mörre
你的屏幕截图似乎来自JsFiddle（result按钮）。你能否提供该链接？ - 11684
@11684 http://jsfiddle.net/sFhht/ - poitroae
2个回答
4

Your 

<table class="header_table">

具有 30px 的外边距。 请参见

.header_table {
    width:100%;
    border:none;
    margin:30px auto;
}

只需删除此边距（或添加margin-top:0;），一切都会很好。

0
对于新来的人。
    .header_table {
width:100%;
border:none;
margin:30px auto;}

上面的代码有30像素的顶部和底部边距。 当一个元素有边距而父元素没有内容时，它的边距会移动父元素的边距。
你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接