HTML/CSS div 未在页面顶部对齐答案

【问题标题】：HTML/CSS div not aligning at top of pageHTML/CSS div 未在页面顶部对齐
【发布时间】：2012-03-02 13:58:16
【问题描述】：

抱歉，这似乎是一个重复的问题，但他们都没有解决我的问题。

所有边距、边框和内边距设置都设置为 0px，除了主页面 div 的 margin-left 和 margin-right 设置为 15px 的任一侧。至少我看不到任何我忘记将其中之一设置为 0px...

由于某种原因，页面顶部的 div 不会与页面顶部对齐。

如果我在<body> 标记和<div class="main"> 标记之间放置任何文本，这将很难显示在屏幕顶部，但任何文本都位于 div“main”标记或 div“header”中标签将与屏幕顶部有大约 15px 的边距。

header.php：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<?php header('Content-Type: text/html; charset=utf-8'); ?>
<title><?php echo $title; ?></title>
<link href='css/main.css' rel='stylesheet' type='text/css' />
</head>

<body>

<div class='main'>
    <div class="header">

        <img src="images/header1.png" id="header" />
    </div>

    <p class='heading_1'>Welcome to D T Hourn Photography</p>
    <p class='bodycontent'>
        Introduction blob
    </p>
    <p class='bodycontent'>
        Albums:
    </p>

css.main:

html
{
border:0px;
padding:0px;
margin:0px;
}

body
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: normal;
background-image: url('../images/bg1.png');
background-attachment:fixed;
padding:0px;
margin:0px;
border:0px;
}

.main
{
top:0px;
margin-top:0px;
margin-right:15px;
margin-left:15px;
margin-bottom:0px;
border-top:0xp;
border-left: 2px outset #445566;
border-right: 2px outset #445566;
width:93%;
max-width:1400px;
background: rgb(222, 222, 222);
background-color:rgba(255, 255, 255, 0.6);
}   


.header
{
    border-bottom: 2px groove red;  
    margin:0px;
    background-image:url('../images/header1.png');
    background-size:100% 100%;
    height:200px;
}


img#header
{
    width:100%;
    height:200px;
    vertical-align: bottom;
    border:0px;
    padding:0px;
    margin:0px;

}

.heading_1 
{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    height:1.5em;
    font-weight: bold;
    color: #000000;
}

.heading_2
{
    font-weight: bold;
}

table
{
    border:1px solid #0000ff;
    padding:0px;
    border-collapse:collapse;
    background-color:#ffffff;

}
.tables_heading 
{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 1em;
    font-weight: bold;
    background-color: #99ccff;
    border-bottom:1px solid #0000ff;
}

编辑：从 header.php 文件中添加了额外的代码。如前所述，如果我在两者之间放置纯文本，那么该文本就很难靠在浏览器的顶部。但 div 之间的任何内容都有约 15 像素的边框。

可以在http://dthourn.com/photography看到实际的在线网站（我到目前为止所做的）

实时版本在 Firefox（至少在我的计算机上）中呈现我想要的效果，但在 I.E 或谷歌浏览器上不呈现。它不会像我想要的那样在我本地计算机上的任何浏览器中呈现。

【问题讨论】：

您好像漏掉了一些 html，只有头部，我们无法从中看出太多。
你能给你的HTML部分提供使用.header和.main的元素吗？给定的部分是没有帮助的。 -- 我想这只是你的标题将主要内容向下推。
<?php header 命令在那个位置不起作用，但我认为这不会导致问题。
正确的边框顶部：0xp；在'.main'上

标签： css html alignment

【解决方案1】：

只需将这个添加到您的 css 文件中：

body { margin:0px; }

希望这能解决您的问题。

【讨论】：

【解决方案2】：

只需使用...

*{margin: 0; padding: 0; border: 0; outline: 0;}

【讨论】：

border 仅在您为自己添加边框时才真正适用。边距应该是边距：0 auto；让一切居中。

【解决方案3】：

尝试：

.main
{
top:0px!important;
margin-top:0px!important;
margin-right:15px!important;
margin-left:15px!important;
margin-bottom:0px!important;
border-top:0xp!important;
border-left: 2px outset #445566!important;
border-right: 2px outset #445566!important;
width:93%!important;
max-width:1400px!important;
background: rgb(222, 222, 222)!important;
background-color:rgba(255, 255, 255, 0.6)!important;
}

【讨论】：

在任何需要的地方使用!importanttag 不是一个好习惯。这应该在少数情况下使用，这不允许另一个或足够简单的解决方案。更好地正确清理 CSS。但这不是问题，因为缺少 position 属性，top 值不会有任何影响。

【解决方案4】：

将以下内容添加到您的 css 文件的顶部：

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; }

然后再往下确保再次给你的 div 中的各种元素填充，例如：

p { font-size: 12px; padding: 12px; }

我通常给 padding 赋予与 font-size 相同的值，但这种方法的好处是您可以随意自定义它。

【讨论】：

我不认为将这个css留在你的项目中是一个好的解决方案，但是你可以通过删除部分行直到你的问题再次出现来使用它来找到你的问题的真正原因。

【解决方案5】：

我已经研究这个问题好几个小时了。我复制并粘贴了提问者的答案，终于成功了。顶部没有更多空间。我已将我能想到的所有内容都重置为 0px，但我显然错过了一个。

【讨论】：

【解决方案6】：

对于刚接触 HTML 的人，一些标签（如 <p> 和 <h1>）会添加填充，这样它们就不会一直到达页面顶部。当我遇到这个问题时，我喜欢使用<span>。

【讨论】：

【解决方案7】：

我想我会把我的两分钱扔在这里：只是你的 css 的一个摘录，这里有很多不需要的代码，所以把它拿出来并缩短它：

.main
{
margin: 0 auto;
border-left: 2px outset #445566;
border-right: 2px outset #445566;
width:93%;
max-width:1400px;
background: rgb(222, 222, 222);
background-color:rgba(255, 255, 255, 0.6);
}

就<p> 和<h1> 标签而言，您只需在使用这些标签时手动设置边距和内边距。如果您在浏览器和文本编辑器中执行此操作，请在浏览器上按 F12，它应该会调出开发人员/调试控制台。在它们上，您将能够看到正在使用您的利润等的内容，并且应该可以帮助您。

【讨论】：

【解决方案8】：

如果边距：0px；还不够，你总是可以像这样使用负边距：

.example {margin-top: -10px;}

【讨论】：