html - BODY 之前的空间？-6ren

html - BODY 之前的空间？

转载作者：行者123 更新时间：2023-11-27 22:34:38

25

4

我似乎无法解决我的问题，出于某种原因，我的 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;
}

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

enter image description here

最佳答案

你的

<table class="header_table">

的边距为 30px。见

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

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

关于html - BODY 之前的空间？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14797479/

25

4

0

文章推荐： c++ - 如何在 C++ 中生成 4 个不同的随机数

文章推荐： c++ - 什么时候使用新关键字？

Tomcat 用完了 PermGen 空间，即使保留了很多 PermGen 空间
运行 Tomcat 失败并出现 java.lang.OutOfMemoryError - 与缺少 PermGen 空间相关的错误。我最近将 Tomcat 更改为以自己的用户(而非 root)运行。
空间+时间参数的Postgresql复合索引
我们有一个表，其中包含数百万行，其中包含 PostGIS 几何图形。我们要执行的查询是:落在边界几何内的最新条目是什么？这个查询的问题是我们经常会有大量的项目匹配边界框(半径大约为 5 公里)，然后
php - Elasticsearch 空间
我有一个Elasticsearch设置，它将允许用户搜索通配符作为索引。 array:3 [ "index" => "users" "type" => "user" "body" => arra
表格中按钮之间的 HTML 空间
我创建了一个表，其中每行包含两个按钮，并且两个按钮连接在一起，我想将两个按钮分开。我用过不起作用，css 也是，这是他们的另一种方式。我有另一个问题，因为我不想在表格边框内显示操作按钮，而是在靠近
按钮之间的 CSS 空间
我试图在 jQuery Mobile 中的两个按钮之间留出空白。现实中的布局是这样的: Button 1 Button 2 (Hidden w/ display: none)
函数后的 JavaScript 空间
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
android - 如何使用图表引擎减少条形图和图表图例之间的间隙/空间？
您好，我对图表应用程序还很陌生。现在我为我的应用程序创建了条形图。当我运行 create bar chart as separate project 时，输出如下所示。然后当我将条形图与我的应用程序
hibernate 空间 : can't find function
我在使用 H2 和 GeoDB(内存中，junit)时遇到问题。另外，使用 Hibernate 5(每个包的最新版本，包括 hibernate-spatial)和 Spring 4。通过 id 实
r - 映射澳大利亚城市 - R 空间
我想画一张澳大利亚的 map ，并将每个城市表示为一个点。然后突出显示人口众多(> 1M)的城市 library(sp) library(maps) data(canada.cities) head
Cassandra:备份整个 key 空间
关闭。这个问题是opinion-based .它目前不接受答案。想改进这个问题？更新问题，以便 editing this post 提供事实和引用来回答它. 6年前关闭。 Improve this
delphi - Memo1.Loadfromfile()空间
如何保持.txt文件中存在的空格？在.txt文件中，它表示： text :text text1 :text1 text23 :text2 text345 :text3 如果我写这段
passwords - 如何计算密码的 key 空间？
以下哪个键最大？选项 1:16 个数字 [0,9] 选项 2:30 个元音选项 3:字母表中的 16 个字母选项 4:32 位有人可以帮助我，告诉我哪一个是正确的答案以及我们如何计算它吗？我知
android - Azure 空间 anchor
在 Unity 3d 中使用 Azure 空间 anchor 来实现在 iOS 和 Android 上部署的室内和室外增强现实体验是否有益？最佳答案是的，对于 Azure Spatial Anch
javascript - 调整大小的图像占用太多 UI 空间
我有一个绝对定位的圆形图像。图像只需占据屏幕宽度的 17%，并且距离顶部 5 个像素。问题是，当我调整图像大小以占据屏幕宽度的 17% 时，它会这样做，但同时容器会变长。图像本身不会拉伸(stret
cassandra - 使用nodetool备份cassandra key 空间
我在 Ubuntu 14.04 上使用 Cassandra。从文档中，我可以看到运行命令: nodetool snapshot 创建我的 key 空间的快照。命令的输出是: nodetool sn
Heroku 将应用程序迁移到私有(private)空间
Heroku引入了“私有(private)空间”，是否可以将现有应用迁移到私有(private)空间？ https://blog.heroku.com/archives/2015/9/10/herok
mediawiki - 在语义记录中设置非绑定(bind)空间
是否允许在语义记录中使用非绑定(bind)空格或其他 HTML 编码字符？我遇到的问题是 ; 字符被软件视为记录的结尾。例如:假设我有一份婚姻记录，其中包含 2 个结婚者的姓氏、结婚年份以及结
python - 自动泊车位检测-如何使用OpenCV和Python初始化泊车位图/空间
我正在研究“智能 parking ”项目，偶然发现了包含我们真正需要的YouTube视频。我们已经实现了第一部分，即从视频源进行实时透视变换，下一步是将其定义为一组矩形我基本上需要知道他是如何做到的
java - 如何为两个类创建共享 ID 空间？
我有两个类:Engine 和 Trainset(多个单元)，这两个类共享其 ID 空间，其中包含名称和系列 id=- . 这是我的Engine类(它是抽象的，因为有引擎的子类型(DieselEngin
java - 分割字符串 Java 空间
如果有人能帮助我，那就太好了。我正在尝试使用Java的Split命令，使用空格分割字符串，但问题是，字符串可能没有空格，这意味着它将只是一个简单的顺序(而不是“输入2”将是“退出”) Scanner

首页

博学

6Ren·AI

商城

html - BODY 之前的空间？