HTML/CSS div未对齐到页面顶部

3

非常抱歉,这似乎是一个重复的问题,但是没有解决我的问题。

所有的边距、边框和内边距设置都为0像素。主页面div的margin-left和margin-right在两侧都设置为15px。至少我没有看到我忘记将其中之一设置为0px。

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

如果我在标签和

标签之间放置任何文本,那么它将紧贴着屏幕顶部,但是
标签或
标签中的任何文本都将距离屏幕顶部约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文件中添加了额外的代码。如上所述,如果在<body><div class="main">之间放置普通文本,则该文本将与浏览器顶部紧贴在一起。但在div之间的任何内容都有大约15像素的边框。

实际网站(到目前为止我所做的)可以在http://dthourn.com/photography上看到。

在Firefox(至少在我的电脑上)中,现场版本呈现出我想要的样子,但在IE或Google Chrome中不是。在我的本地计算机上,任何浏览器都无法呈现我想要的效果。


1
看起来你漏掉了一些HTML,现在只有头部,我们无法从中得到太多信息。 - Andrew
你能提供使用.header.main元素的HTML部分吗?给出的部分并不是很有帮助。--我猜这只是你的标题将主要内容向下推。 - Smamatti
<?php header 命令在那个位置不起作用,但我认为这并不是问题的原因。 - Mr Lister
在'.main'上正确设置边框顶部:0xp; - MCSI
8个回答

15

只需将以下内容添加到您的CSS文件中:

body { margin:0px; }

希望这能解决您的问题。


2

只需使用...

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

边框(border)只有在你自己添加边框时才是真正适用的。而边距(margin)应该是margin: 0 auto;来居中一切。 - Ricky

0

尝试:

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

6
滥用!important标签并不是一个好的做法。它应该只在没有其他简单解决方案的情况下使用。最好彻底清理CSS。虽然缺少position属性导致top值没有任何影响,但这不是问题所在。 - Smamatti

0

我想在这里加入我的两分钱:你的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 键可以打开开发/调试控制台,在那里你可以看到是什么在使用你的边距等,这应该会帮助你解决问题。

0

我已经花了几个小时来解决这个问题。我复制并粘贴了提问者的答案,最终它起作用了。顶部不再有空白。我已经将所有可能想到的东西都重置为0像素,但显然我错过了一个。


0
对于刚接触HTML的人来说,有些标签(比如<p><h1>)会额外添加填充,以便它们不会完全靠近页面的顶部。当我遇到这个问题时,我喜欢使用<span>标签。

0
如果 margin: 0px; 不够的话,你可以像这样使用负边距:
.example {margin-top: -10px;}

0
请在您的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)相同,但这种方法的好处在于您可以根据自己的需要进行自定义。


1
我认为在项目中留下这个CSS并不是一个好的解决方案,但你可以通过删除行的部分直到问题重新出现来找到真正的原因。 - TimV

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接