填充/保證金的原因是什麼？

我一直在HTML中的網頁，我遇到了一個奇怪的問題。填充/保證金的原因是什麼？

#menuh 
    { 
    width:100%; 
    padding-top:10px; 
    padding-bottom:10px; 
    float:left; 
    font-family:arial, tahoma; 
    text-align:left; 
    padding-left:12%; 
    background:#c1188d; 
    }

我什麼都看不到這裏應該引入左側的白邊。

用於下拉菜單的洋紅色帶應嚴格對齊左（在我看來），但事實並非如此。（左側應該像右側是右邊緣。）

有人能告訴我瀏覽器邊緣和洋紅色div（#menuh）之間的距離是多少？

來源

2013-05-03 Hayri Uğur Koltuk

問題的標題不匹配的問題。 – BoltClock 2013-05-03 18:51:16

@BoltClock你爲什麼這麼認爲，你的建議是什麼？ – 2013-05-03 19:21:16

許多瀏覽器都有默認樣式。在我的情況（Chrome/Mac）中，body元素的邊距爲8px。您可以使用以下規則（把它放在你的CSS的頂部），默認情況下刪除元素上的所有保證金/填充：

* { margin: 0; padding: 0 }

或者你可以只取出body元素的保證金/填充。我更喜歡通配符方法，因爲它保留了以後與其他瀏覽器默認相同的問題。

來源

2013-05-03 18:39:00

要添加到此答案，大多數有經驗的Web UI開發人員在應用自己的CSS樣式之前，使用稱爲CSS重置的方式來移除默認瀏覽器行爲。我強烈建議查看CSS重置，因爲這些可以讓您的生活更輕鬆，尤其是跨瀏覽器開發 – 2013-05-03 18:42:10

實際上，大多數有經驗的Web UI開發人員都沒有。 – BoltClock 2013-05-03 18:51:42

我發現自己在這裏同意BoltClock – Bojangles 2013-05-04 07:47:02

JSFiddle（和大多數瀏覽器）會給<body>標記一個默認填充，這是您看到的空白區域。設置

body { 
    padding: 0; 
}

和你的問題消失。 JSFiddle中的填充（至少在我的Chrome/Win8上）是8px。

要捕獲所有情況（瀏覽器有不同的默認樣式），應用0填充和利潤率既<body>和<html>：

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

來源

2013-05-03 18:39:25 Bojangles

默認填充是問題。大多數瀏覽器都有它，所以即使在jsfiddle之外，也可能會遇到它。

最好的事情是使用CSS重置樣式表。爲您在網頁中使用的大多數元素創建適當的填充和邊距重置。下面是一些例子：

http://yuilibrary.com/yui/docs/cssreset/
http://meyerweb.com/eric/tools/css/reset/
http://www.cssreset.com/
http://html5reset.org/
http://necolas.github.io/normalize.css/

來源

2013-05-03 18:47:31 tahdhaze09

填充/保證金的原因是什麼？

回答

相關問題