div没有延伸到身体的顶部

Question

这是我目前拥有的： https<\/a> :\/\/jsfiddle.net\/xdzadbo0\/4\/

如您所见，容器 div 没有延伸到顶部。 搜索这个，看起来很重要， margin: 0;<\/code> 和padding: 0;<\/code> 关于一切。 这样做我得到了延伸到边缘的宽度，但我仍然没有让顶部一直向上延伸。

我该怎么做？

Answer 1

只需在您的CSS中添加

 h1
{
margin:0;
}   

Answer 2

您遇到的问题是由于在h1标签上设置了margin 。

看到这个jsfiddle

我所做的就是在CSS中添加以下内容：

#container h1 {
    margin-top: 0;
}

Answer 3

一些元素具有默认值。 您可以通过删除这些值来解决此问题。

* {
    margin: 0;
    padding: 0;
}

在此链接中了解有关CSS重置的更多信息

Answer 4

html标题具有默认的边距和填充，这就是为什么它似乎没有扩展到顶部的原因。 在标题中输入以下代码：

h1, h2{
  margin: 0px;
  padding: 0px;
}

我希望这会有所帮助。

https://jsfiddle.net/7w98195h/

Answer 5

您可以在#container添加一个clearfix。 这样， h1的边距不会超出父元素。 如果您想保持h1的顶部空白，可能会很有用。

 html { margin: 0; padding: 0; } body { background-color: #aaaaaa; margin: 0; padding: 0; } #container { background-color: #FFFFFF; margin: 0; padding: 0; } .cf:before, .cf:after { content: " "; /* 1 */ display: table; /* 2 */ } .cf:after { clear: both; } 

 <div id="container" class="cf"> <h1>Title</h1> <h2>Welcome</h2> </div> 

Answer 6

我看到了您的问题，并且在我刚开始时也经历过。

首先，其他所有人的答案都是正确且有用的。 我只是想添加一些可能对您将来的项目有所帮助的内容。

您可能已经知道，并非所有浏览器都能以完全相同的方式看到事物（代码）……可怕的“跨浏览器不兼容”梦night。

在以后的项目中，我建议在CSS代码的开头包含“浏览器重置”。 这样一来，您就可以按照自己的意愿展示事物，从而拥有一个更公平的竞争环境。

加布里埃尔·比卡（Gabriel Bica）在上面的答案之一中分享了一个小代码段：

* {
    padding: 0;
    margin: 0;
}

很好用！ 但是，我喜欢使用的东西覆盖了一点点，并为我提供了很多帮助。 该代码是：

/* ========== Browser Reset ========== */

html, body, div, span, applet, object, iframe,
h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, 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,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

html, body {
    height: 100%;
}

显然，这是更多的代码，但是如果将其放在CSS文件的顶部，它将真的有助于消除您遇到的问题类型，这有时会让人感到沮丧。 简而言之，它所做的只是基本上摆脱了麻烦的浏览器默认设置，从而使您在一个浏览器上获得与其他浏览器相同的可见结果的可能性更高。

希望有帮助！

申诺尔

Answer 7

if 即使设置了margin: 0px;<\/code> 和padding: 0px;<\/code> 对于 h1 和 div，它仍然没有扩展，这样做：

body {
   margin: 0px;
}