Question

抱歉看起来像是一个可疑的问题，但没有一个能解决我的问题。

所有边距，边框和填充设置都设置为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或谷歌浏览器上。它不会在我本地计算机上的任何浏览器中呈现，因为我想要它。

Answer 1

将这一个简单地添加到您的css文件中：

body { margin:0px; }

希望这能解决您的问题。

Answer 2

只需使用......

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

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

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

然后再向下确保再次给出divs填充中的各种元素，例如：

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

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

Answer 5

我已经在这个问题上工作了好几个小时。我复制并粘贴了thequerist的答案，最后它起作用了。顶部没有更多的空间。我已经重置了我想到的所有0px，但我显然错过了一个。

Answer 6

对于HTML新手，某些代码（例如<p>和<h1>）会添加填充内容，因此他们不会一直走到页面顶部。当我遇到这个问题时，我喜欢使用<span>。

Answer 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>标签而言，您只需手动设置保证金＆amp;每当你使用这些时填充。如果您在浏览器和文本编辑器中执行此操作，请在浏览器上按F12并提示开发人员/调试控制台。在他们身上，你将能够看到利用你的边缘等等，并应该帮助你。

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

7 个答案: