的顶部这是我目前有：https://jsfiddle.net/xdzadbo0/4/股利不延伸到身体

正如你可以看到div容器没有延伸到顶部。搜索这个，看起来很重要的一点是要有margin: 0;和padding: 0;。这样做我得到的宽度延伸到边缘，但我仍然没有顶部一直延伸。

我该怎么做？

2017-05-25 Thomas

h1有一些webkit保证金。

标题

– tech2017

您遇到的问题归因于h1标记上设置的margin。

看到这个jsfiddle

我所做的只是添加以下的CSS：

#container h1 { 
    margin-top: 0; 
}

来源

2017-05-25 17:27:47 Matthew

你太棒了！我甚至没有想过h1标签。我会在10分钟后接受。 – Thomas

@Tomas你可以添加一个clearfix到'＃容器'。这样'h1'的边距不会突破父元素。如果你想保留'h1'的顶部空白，可能会很有用。 – hungerstar

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

* { 
    margin: 0; 
    padding: 0; 
}

Read more about css reset in this link

来源

2017-05-25 17:31:54

的HTML标题有默认边距和补这就是为什么它似乎没有延伸到顶部。在你的头中输入验证码：

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

我希望这将有助于。

https://jsfiddle.net/7w98195h/

来源

2017-05-25 17:32:11

就在你的CSS

h1 
{ 
margin:0; 
}

来源

2017-05-25 17:33:07

添加此你可以一个clearfix添加到#container。这样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>

来源

2017-05-25 17:42:47 hungerstar

我看到了你的问题，我经历过，当我第一次开始了太多。

首先，其他人的答案是正确和有用的。我只是想添加一些可能对未来项目有帮助的东西。你可能已经知道，并不是所有的浏览器都以相同的方式看待事物（代码）......可怕的“跨浏览器不兼容性”的噩梦。

在未来的项目中，我会建议在CSS代码的开头添加一个“浏览器重置”。这可以让你有一个更公平的竞争环境，让事情表现出你打算的方式。上述

一个小的代码片段，其中加布里埃尔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

来源

2017-05-25 18:04:30

股利不延伸到身体

标题

回答

相关问题