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

新手上路,请多包涵

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

所有边距、边框和填充设置都设置为 0px。主页 div 的 margin-left 和 margin-right 两边设置为 15px。至少我看不到任何我忘记将其中之一设置为 0px 的地方。

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

如果我在 <body> 标签和 <div class="main"> --- 标签之间放置任何文本,那将很难显示在屏幕顶部,但是 div“main”标签或div “header” 标签距离屏幕顶部大约有 15px 的边距。

标头.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 或谷歌浏览器中不呈现。它不会在我本地计算机上的任何浏览器中呈现我想要的样子。

原文由 user1245135 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 290
1 个回答

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

 body { margin:0px; }

希望这能解决您的问题。

原文由 Abdul Muiz 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
logo
Stack Overflow 翻译
子站问答
访问
宣传栏