html文檔寬度

有人可以澄清如何爲html文檔設置寬度。我已經設置了我的身體標記的寬度，甚至做了一個包裝div來設置寬度，但仍然頁面運行幾個像素寬？我做錯了什麼？html文檔寬度

2010-01-14 amit

我們需要源代碼或更好措辭的問題。雖然它是寬度爲100％的元素上的邊框或填充，但有可能。閱讀「盒子模型」。另外，使用Firefox和Firebug擴展或類似的開發工具來檢查問題。 – tanerkuc 2010-01-14 21:28:54

要什麼@pekka說跟進：

body標籤在所有的瀏覽器默認的保證金

瀏覽器有不同的默認樣式，這可能會解釋您看到的額外邊距或填充。爲了讓您的CSS按照您的期望行事，通常建議您重置您的CSS。簡而言之，但是在所有元素中定義某些樣式，您可以消除這些瀏覽器的不一致性，然後可以相信您的樣式也會按照您的要求級聯。這就是爲什麼在HTML和BODY元素上設置邊距可以消除問題中提到的額外空間的原因。

Eric Meyer對此有着很好的想法，他的重置是我在網絡上最常見的一種。但是，應該指出的是，下面的廣泛的例子不應該沒有使用。調整它以滿足您的項目需求

EX（從Eric Meyer的重置，下面的鏈接）：

/* http://meyerweb.com/eric/tools/css/reset/ */ 
/* v1.0 | 20080212 */ 

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, font, 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 { 
margin: 0; 
padding: 0; 
border: 0; 
outline: 0; 
font-size: 100%; 
vertical-align: baseline; 
background: transparent; 
} 
body { 
line-height: 1; 
} 
ol, ul { 
list-style: none; 
} 
blockquote, q { 
quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
content: ''; 
content: none; 
} 

/* remember to define focus styles! */ 
:focus { 
outline: 0; 
} 

/* remember to highlight inserts somehow! */ 
ins { 
text-decoration: none; 
} 
del { 
text-decoration: line-through; 
} 

/* tables still need 'cellspacing="0"' in the markup */ 
table { 
border-collapse: collapse; 
border-spacing: 0; 
}

查閱這些討論的更詳細的解釋：

http://meyerweb.com/eric/tools/css/reset/

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

來源

2010-01-14 22:30:41 Jack

您可以給我們一個CSS重置的實例嗎？ – 2010-01-14 23:17:36

body標籤在所有瀏覽器中都有默認的邊距。也許它缺少一個margin: 0px？

雖然根據規則可能沒問題（我不知道它是否是這樣），但給出body標籤的寬度聽起來並不正確。如果您需要將您的內容限制在某個區域，最好在<body>的正下方使用容器<div>。

來源

2010-01-14 21:28:52

認爲你的意思是「保證金：0」 – 2010-01-15 00:01:26

它也是完全有效的，給身體的寬度，並添加一個div只是爲了避免設置身體上的寬度更糟糕，IMO - 標記中不必要的噪音 – 2010-01-15 00:03:07

你可能需要分配零填充和身體& HTML的保證金：

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

來源

2010-01-14 21:29:09

寬度爲我的身體標記

有些瀏覽器（如Internet的許多版本資源管理器）不允許您在body元素上設置寬度。它通常是最好添加一個包裝DIV和風格，而不是

頁面運行寬

你可能不會刪除默認的填充和/或保證金（不同的瀏覽器有幾個像素不同的默認值）

來源

2010-01-14 21:30:08 Quentin

填充不帳戶的寬度，除非有問題的瀏覽器是以奇怪模式運行的MSIE（您實際上不希望它是 - 使用正確的文檔類型修復它）。 – BalusC 2010-01-14 23:32:32

我認爲這是戴維的觀點 - 如果身體的寬度設置爲100％，但有填充或邊距，那麼他們的行爲將增加到100％ – 2010-01-15 00:05:41

元素（如body標籤）都具有默認邊距和填充，ma其中ny非零。這可能解釋了額外的像素。

html, body { 
    width: 800px; 
    margin: 0; 
    padding: 0; 
}

這是一個CSS Reset的例子：這個概念是消除特定瀏覽器的默認設置，從而可以控制在所有瀏覽器的確切外觀。在這種增量重置中，我們會消除可能會影響額外像素的兩個元素的邊距和填充。

來源

2010-01-14 23:34:33

回答

相關問題