如何刪除身體周圍的空白空間或清除默認的CSS樣式

我承認是一個初學者，但我也做了大量的搜索發佈之前。我的div元素似乎有額外的空間。我還想指出，我嘗試了許多邊界組合：0，padding：0等，沒有任何東西似乎擺脫了空白區域。如何刪除身體周圍的空白空間或清除默認的CSS樣式

下面是代碼：

<html> 
<head> 
    <style type="text/css"> 
     #header_div { 
      background: #0A62AA; 
      height: 64px; 
      min-width: 500px; 
     } 
     #vipcentral_logo { float:left; margin: 0 0 0 0; } 
     #intel_logo  { float:right; margin: 0 0 0 0; } 
    </style> 
</head> 
<body> 
    <div id="header_div"> 
     <img src="header_logo.png" id="vipcentral_logo"> 
     <img src="intel_logo.png" id="intel_logo"/> 
    </div> 
</body>

這是什麼樣子（我插紅色箭頭顯式調用了額外的空間）：

Extra space around a div element

我期待藍色直接貼近瀏覽器邊緣和工具欄。圖像的高度均爲64像素，並且與分配給#header_div的圖像背景顏色相同。任何信息將不勝感激。

來源

2012-03-03 Anthony

使用Google Chrome瀏覽器或Firefox Web開發人員插件來檢查您的元素，以查看應用了哪些樣式。它可能是您頁面的頭部或html元素的邊距或填充。 – 2012-03-03 15:36:16

找出空間來自哪裏的一個簡單提示是爲每個元素設置不同的背景顏色。以及使用工具來檢查元素... – kaj 2012-03-03 15:43:51

body有默認邊距：http://www.w3.org/TR/CSS2/sample.html

body { margin:0; } /* Remove body margins */

或者你可以使用這個有用全局復位

* { margin:0; padding:0; box-sizing:border-box; }

如果你想少些*全球比：

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    outline: 0; 
    font-size: 100%; 
    vertical-align: baseline; 
    background: transparent; 
}

其他一些CSS重置：

http://yui.yahooapis.com/3.5.0/build/cssreset/cssreset-min.css
http://meyerweb.com/eric/tools/css/reset/
https://github.com/necolas/normalize.css/
http://html5doctor.com/html-5-reset-stylesheet/
＆hellip;

來源

2012-03-03 15:36:20

感謝大家的所有幫助！我首先嚐試了這種方法作爲「本壘打」解決方案，並且運行良好。問題解決了！ – Anthony 2012-03-03 16:00:47

嘗試廣告在你的CSS如下：

body, html{ 
    padding:0; 
    margin:0; 
}

來源

2012-03-03 15:34:54 Alex

這就是body元素的默認保證金/填充。

某些瀏覽器有一個默認邊距，一些默認的邊距，並且兩者都作爲主體元素中的填充。

添加到您的CSS：

body { margin: 0; padding: 0; }

來源

2012-03-03 15:35:41 Guffa

嘗試從body標籤中刪除填充/邊距。

body{ 
padding:0px; 
margin:0px; 
}

來源

2012-03-03 15:36:43

謝謝你，我知道這是一段時間後。這比我接受的答案更適合我 – redeagle47 2015-08-07 15:17:38

即使將BODY MARGIN設置爲零，我仍然發現此問題仍然存在。

但事實證明，這是一個簡單的解決辦法。您只需爲HEADER標籤設置1px的邊框，並將BODY MARGIN設置爲零，如下所示。

body { margin:0px; } 

header { border:1px black solid; }

如果你有你的頭內的任何H1，H2，標籤，你還需要這些標籤頁邊距設置爲零，這將擺脫可能出現的任何額外的空間。

不知道爲什麼這個工作，但我使用Chrome瀏覽器。顯然你也可以改變邊框的顏色來匹配你的標題顏色。

來源

2015-11-02 12:47:12 wardheed

轉到與此

body { 
    padding:0px; 
    margin:0px; 
}

來源

2016-08-05 04:38:17

我有同樣的問題，這是在頁面的頂部，也是我第<p>元素有一個瀏覽器的WebKit默認保證金。這是推動我的整個股利下降，這與你所談論的效果相同，所以請注意頁面頂部的任何基於文本的元素。

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>My Website</title> 
    </head> 
    <body style="margin:0;"> 
     <div id="image" style="background: url(pixabay-cleaning-kids-720.jpg) 
no-repeat; width: 100%; background-size: 100%;height:100vh"> 
<p>Text in Paragraph</p> 
     </div> 
    </div> 
    </body> 
</html>

所以，只要記住檢查所有子元素不僅僅是html和body標籤。

來源

2017-12-19 02:57:19 Daniel

如何刪除身體周圍的空白空間或清除默認的CSS樣式

回答

相關問題