如何消除 HTML 元素周圍不需要的空白？

消除元素周圍的空白：解決CSS預設值

在網頁設計中，儘管指定了零，但元素周圍的多餘空間並不罕見邊距和填充。這可以歸因於應用於

的預設樣式。元素。預設情況下，瀏覽器會在正文的每一側新增 8px 的邊距。

解決方案：自訂正文

要解決此問題，您可以覆寫預設的正文樣式透過在 CSS 中將邊距設為零。這可確保正文中不會增加額外的空間。

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

替代方案：全域重設

如果您喜歡更全面的解決方案，可以實施全域重設重設以消除應用於元素的所有預設樣式。這是透過為所有元素明確定義零邊距和填充來實現的。

*,
*::before,
*::after {
    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重設：

或者，您可以利用現有的CSS 重設框架，例如：

• [Eric Meyer 的CSS 重設](http:// meyerweb.com/eric/tools /css/reset/)
• [尼古拉斯·加拉格爾的Normalize.css](https://github.com/necolas/normalize.css/)
• [HTML5Doctor 的HTML5重置樣式表](http://html5doctor.com/html-5-reset-stylesheet/)

以上是如何消除 HTML 元素周圍不需要的空白？的詳細內容。更多資訊請關注PHP中文網其他相關文章！