Question

这就是我目前所拥有的：https://jsfiddle.net/xdzadbo0/4/

正如您所看到的，容器div没有延伸到顶部。搜索到这一点，似乎对所有内容都margin: 0;和padding: 0;很重要。这样做我得到的宽度延伸到边缘，但我仍然没有顶部一直向上延伸。

我该怎么做？

Answer 1

只需在您的css中添加

 h1
{
margin:0;
}

Answer 2

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

请参阅此jsfiddle

我所做的只是将以下内容添加到CSS中：

#container h1 {
    margin-top: 0;
}

Answer 3

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

* {
    margin: 0;
    padding: 0;
}

Read more about css reset in this link

Answer 4

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

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

我希望这会有所帮助。

https://jsfiddle.net/7w98195h/

Answer 5

您可以向#container添加clearfix。这样，h1的边距不会突破父元素。如果您想保留h1的上边距，可能会很有用。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 6

我看到了你的问题，当我第一次出发时，我也经历过这个问题。

首先，其他人的答案都是正确和有用的。我只想添加一些可以帮助你完成未来项目的东西。

正如您可能已经知道的那样，并非所有浏览器都能看到彼此完全相同的东西（代码）......可怕的“跨浏览器不兼容”的噩梦。

在未来的项目中，我建议在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文件的顶部，那么它将真正有助于消除你经历过的问题类型，有时可能会让人感到困惑。简而言之，它所做的一切基本上都是摆脱了更麻烦的浏览器默认设置，因此您可以在一台浏览器上获得与其他浏览器相同的可见结果的概率。

希望有所帮助！

Shenole

Div没有延伸到身体的顶部

6 个答案: