2012-03-04 110 views
0

我注意到在某些網站上,標題沒有邊緣或空白,我試圖重新創建類似的東西,但不知道如何去做。一個很好的例子就是stackoverflow本身的頂部通知/搜索欄。如何去除div標籤周圍的白色邊緣?

.header 
{ 
    height: 250px; 
    width: 100%; 
    margin: 0 auto; 
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#ffa200), color-stop(100%,#d25400)); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa200',endColorstr='#d25400',GradientType=0); 
    background: -moz-linear-gradient(top,#ffa200,#d25400); 
    background-image: -o-linear-gradient(#ffa200,#d25400); 
    overflow: hidden; 
} 
.header .topbar 
{ 
    height: 60px; 
    background-image: url(../imgz/head/hBarSBg.png); 
    background-repeat: repeat-x; 
} 
.header .topbar .mCquake 
{ 
    height: 37px; 
    width: 278px; 
    background-image: url(../imgz/head/mCqRight.png); 
    background-repeat: no-repeat; 
    float: right; 
    margin-right: 10px; 
    margin-top: 11.5px; 
    margin-bottom: 11.5px; 
} 

我該如何去做這件事?

謝謝。 :)

+0

其餘的代碼在哪裏?我們該如何看看有什麼不對?你說的是什麼「空白」和「邊緣」? – Joseph 2012-03-04 04:15:01

+0

這是固定的,可能是瀏覽器使用默認值的HTML和身體標記(邊距和填充),這會在我的標題標記周圍造成額外的空白。在之前的評論中已經指出,現在已經修復,謝謝。 :) – Nyanja 2012-03-04 04:39:59

回答

0

大部分的人使用一些默認的CSS聲明把所有的瀏覽器相同的水平。最近引起注意的是http://necolas.github.com/normalize.css/ - 您也可以在Google上輸入CSS Resets,它會給你一堆結果:D

+0

非常感謝!這將是非常有幫助的。 :) – Nyanja 2012-03-04 04:30:47

+0

很高興它可以幫助!我看到你在這裏是新的,如果它回答你的問題,請將此標記爲答案或upvote :)謝謝! – allaire 2012-03-04 04:32:57

+0

爲什麼downvote? – allaire 2012-03-04 04:41:21

1

你將不得不重置默​​認paddingsmargins通過瀏覽器

* { 
    margin: 0px; 
    padding: 0px; 
    outline: none; 
    border: 0px; 
} 

此設置也將有助於你的CSS樣式在不同的瀏覽器上運行同樣。

+1

您可以添加:大綱:無;邊界:0; – 2012-03-04 04:23:15

+0

我建議使用'html,body'而不是'*',因爲您可能會依賴某些元素的默認填充/邊距。 – 2012-03-04 04:24:25

+0

@AramKocharyan對於這個特定的例子,重置'body'的餘量就足夠了。但全局CSS重置包括將所有默認值重置爲0,從而使元素樣式在所有瀏覽器中具有相同的值。 – blackpla9ue 2012-03-04 04:27:50

3

你忘了身體邊距設置爲0。

body { 
    margin: 0px; 
} 
+0

修正了,謝謝。 :) – Nyanja 2012-03-04 04:33:41