Question

我无法解决我的问题，出于某种原因，我的身体前有一个空间。

<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;
}

这是我得到的结果的图片。我不希望它有这样的空间，我希望它从顶部开始。这也发生在我测试的每个浏览器中。

enter image description here

Answer 1

你的

<table class="header_table">

的保证金为30px。参见

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

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

BODY之前的空间？

1 个答案: