空白難題：解決意外的頁邊距

空白難題：解決意外的頁邊距

您遇到了一個令人費解的問題，20 像素的空白神秘地出現在頂部您的頁面，似乎沒有任何明顯的來源。檢查元素後，很明顯，受影響的區域既沒有應用填充也沒有應用邊距。然而，在檢查 HTML 元素時，存​​在空白。

進一步深入研究，您會發現刪除 HTML 聲明 (>) 可以消除空白。這表示差異在於瀏覽器對 HTML 文件的預設呈現。

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, caption {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

要解決此問題，請在網站樣式表的開頭實施 CSS 重設。不同的瀏覽器會套用不同的預設邊距和填充，這可能會引入意外的間距。 CSS 重設為所有元素建立一致的基線，確保跨瀏覽器的一致性。

html、body、div、span、applet、object、iframe、h1、h2、h3、h4、h5、h6、p、 blockquote、pre、a、縮寫、縮寫、地址、大、引用、程式碼、del、dfn、em、字體、img、ins、kbd、q、s、samp、小、罷工、強、子、sup、tt、 var, b, u, i, center, dl, dt, dd, ol, ul, li, 字段集, 表單, 標籤, 圖例, 標題 { 保證金：0； 填充：0； 邊框：0； 輪廓：0； 字體大小：100%； 垂直對齊：基線； 背景：透明； }

通用選擇器方法：

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, caption {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

作為列出所有單一元素的替代方法，您可以使用通用選擇器 (*)。此選擇器是跨瀏覽器相容的，並有效地重置頁面上所有元素的預設樣式：

* { 保證金：0； 填充：0； 邊框：0； 輪廓：0； 字體大小：100%； 垂直對齊：基線； 背景：透明； }

透過實施這些 CSS 更改，您可以消除頁面頂部不需要的空白，確保在不同瀏覽器中獲得一致且視覺上無縫的使用者體驗。