Fatal编程技术网
  • html/
  • Html 为什么页边空白在我的页面顶部？

Html 为什么页边空白在我的页面顶部？

html css

Html 为什么页边空白在我的页面顶部？,html,css,Html,Css,MyPage.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <title>Color Flash Cards</title> <link rel="stylesheet" href="css/index.css" /> </head&

MyPage.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Color Flash Cards</title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div id="header">
    <div id="title">
        <h1>Color Flash Cards</h1>
    </div>
</div>
</body>
</html>
结果：

顶部（紫色上方）的边距从何而来？我需要怎么做才能摆脱它？我可以使用
页边距顶部的负值来执行此操作，但这是“真正的”解决方案吗？
可能是两个原因之一：


  • 身体里的填充物？添加
    填充：0到正文
    • 

  • H1
    上的上边距。为了解决这个问题，添加
    溢出隐藏至
    #标题
    • 

    将
    overflow:hidden
    添加到
    #header
    将导致header
    DIV
    包含其内容（包括
    H1
    上的边距）。
    所有标题都有一个默认边距，可以通过以下方式取消：
    

    h1 {
    margin: 0;
}

    
演示：
    

    如果您想避免这些怪癖并自己设计它们，我建议您使用css重置代码（如t）。将
    h1
    标记的
    边距设置为
    0
    ：
    

    h1 { margin: 0; }

    

    请参阅。
    尝试将
    html
    的边距设置为0
    

    html {
margin:0;
padding:0;
}

    
两件事：
您可能需要添加
    

    body{
  padding:0;
 }

    
但这不是真正的问题，是
    H1
    标记破坏了布局
    
将此添加到css中
    

    h1{
margin-top:0;
}

    

    这里有一点
    使用重置css，默认浏览器设置将被重置
    

    http://meyerweb.com/eric/tools/css/reset/
enter code here

    

    可能是浏览器中的默认填充？请尝试在
    body
    上添加
    padding:0
    。旁注：您的doctype用于充当application/xml+xhtml的页面，我怀疑您是否这样做。

    http://meyerweb.com/eric/tools/css/reset/
enter code here