的頂部這是我目前有：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

股利不延伸到身體

標題

回答

相關問題