HTML/CSS div 未在页面顶部对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9534501/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML/CSS div not aligning at top of page
提问by Abdul Muiz
sorry for what seems like a repitive question but none of them have solved my issue.
对不起，这似乎是一个重复的问题，但他们都没有解决我的问题。
all the margin, border and padding settings are set to 0px, aside from margin-left and margin-right of the main page div which are set to 15px on either side. at least i can't see anywhere i have forgotten to set one of those to 0px...
除了主页面 div 的 margin-left 和 margin-right 两侧设置为 15px 之外，所有边距、边框和填充设置都设置为 0px。至少我看不到任何我忘记将其中之一设置为 0px 的地方...
for some reason the top div of the page will not align at the top of the page.
由于某种原因，页面的顶部 div 不会与页面顶部对齐。
if i put any text between the <body>tag and the <div class="main">tag, that will be hard up against the top of the screen, but any text within the div "main" tag, or the div "header" tag will have a margin of about 15px from the top of the screen.
如果我在<body>标签和<div class="main">标签之间放置任何文本，那将很难靠在屏幕顶部，但是 div “main” 标签或 div “header” 标签内的任何文本都将有大约 15px 的边距屏幕顶部。
header.php:
头文件.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:
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;
}
EDIT: added extra code from the header.php file. as said if i put plain text between and then that text is hard against the top of the browser. but anything between the div's has a border of ~15 pixels.
编辑：从 header.php 文件中添加了额外的代码。如前所述，如果我在两者之间放置纯文本，那么该文本很难抵住浏览器的顶部。但是div之间的任何东西都有~15像素的边框。
the actual on line site (what i've done so far) can be seen at http://dthourn.com/photography
可以在http://dthourn.com/photography上看到实际的在线站点（到目前为止我所做的）
the live version renders as i want it in firefox (at least on my computer) but not on I.E or google chrome. it doesn't render as i want it in any browser on my local computer.
实时版本在firefox（至少在我的计算机上）中按我想要的方式呈现，但不能在IE或谷歌浏览器上呈现。它不会在我的本地计算机上的任何浏览器中按照我想要的方式呈现。
回答by Abdul Muiz
Add simply this one to your css file:
将这个简单地添加到您的 css 文件中：
body { margin:0px; }
Hope this will solve your problem.
希望这能解决您的问题。
回答by Luc Eeckelaert
Just use...
就用...
*{margin: 0; padding: 0; border: 0; outline: 0;}
回答by Ricky
Thought i would chuck my two cents in here: Just an extract of your css, alot of unneeded code here, so took it out and shortened it:
我想我会把我的两分钱扔在这里：只是你的 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);
}
In terms of <p>and <h1>tags, you just need to manually set the margin & padding off whenever you use these.
A little tip if your doing this in a browser and text editor, on the browser press F12 and it should bring up a developer/debugging console. On their you will be able to see what is using your margins etc and should help you out.
就<p>和<h1>标签而言，您只需要在使用它们时手动设置边距和填充。如果您在浏览器和文本编辑器中执行此操作，请在浏览器上按 F12 并显示开发人员/调试控制台，这是一个小技巧。在他们身上，您将能够看到什么在使用您的利润等，并且应该可以帮助您。
回答by Ma9ic
try:
尝试：
.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;
}
回答by thequerist
Add the following to the top of your css file:
将以下内容添加到 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; }
Then further down make sure to give the various elements within your divs padding again, for instance:
然后再往下确保在 div 中再次填充各种元素，例如：
p { font-size: 12px; padding: 12px; }
I usually give the padding the same value as font-size but the nice thing about this approach is that you can customize it as you please.
我通常给 padding 与 font-size 相同的值，但这种方法的好处是你可以随意自定义它。
回答by Pablo
I've been working on this prob for hours. I copied and pasted thequerist's answer and finally it worked. No more space at the top. I've reset everything that I could have thought to 0px but I obviously missed one.
我一直在研究这个问题几个小时。我复制并粘贴了提问者的答案，终于成功了。顶部没有更多空间。我已经将我可以想到的所有内容都重置为 0px，但显然我错过了一个。
回答by W. Boldt
For people new to HTML, some tags (like <p>and <h1>) add padding so they don't go all the way to the top of the page. I like to use <span>when I run into this problem.
对于刚接触 HTML 的人来说，一些标签（如<p>和<h1>）会添加填充，这样它们就不会一直到达页面顶部。<span>当我遇到这个问题时，我喜欢使用。
