頁面頂部的 HTML 空白問題
在網頁頂部遇到空白可能會令人沮喪。儘管仔細檢查元素並沒有發現明顯的原因,但問題似乎源自於 html 元素。
要解決此問題,請考慮在網站樣式表的頂部新增 CSS 重設。不同的瀏覽器呈現預設的邊距和填充,外部樣式表也可能導致意外行為。 CSS 重設將所有元素設為基線,消除這些不一致。
使用下列 CSS 重設程式碼:
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; }
更新:通用選擇器
依照@Frank的建議,您可以使用通用選擇器「*」來簡化重置程式碼:
* { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
此選擇器相容於所有主流瀏覽器,確保跨平台一致的渲染體驗。
以上是為什麼我的網頁頂部有空白?的詳細內容。更多資訊請關注PHP中文網其他相關文章!