如何使用CSS去除Header组件四周的多余边框？

问题说明 #

Header组件四周出现了类似边框的空隙，效果如下：

相关代码如下：

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Killa Media</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <a href="#"><img class="logo" src="https://killa-media.com/wp-content/uploads/2022/11/Killa_logo.png" alt="Killa Media icon logo"> </a>
        <nav>
            <ul class="nav-links"> 
                <li><a href="/about/" class="nav-item">ABOUT</a></li>
                <li><a href="/services/" class="nav-item">SERVICES</a></li>
                <li><a href="/contact/" class="nav-item">GET IN TOUCH</a></li>
            </ul>
        </nav>  
    </header>

CSS代码截图 #

已尝试无效方案：

• 设置margin: -10px
• 设置width: 100%

解决办法 #

从CSS截图能看到你给header加了padding: 10px，而浏览器默认会给body元素添加8px的默认margin，两者叠加就导致header和浏览器边缘出现了空隙，看起来像边框。可以通过以下两种方式解决：

1. 清除body的默认margin
   在CSS中添加：

body {
    margin: 0;
}

这是前端开发的常规初始化操作，能彻底消除body自带的边距，让header的padding直接贴合浏览器边缘，也能避免后续其他元素出现类似默认边距问题。

2. 给header设置负margin抵消body默认边距
   如果不想修改body样式，可以给header设置负margin来抵消body的8px默认边距：

header {
    margin: -8px;
}

你之前用margin: -10px数值不对，所以效果不佳；而设置width: 100%无法解决边距问题，因为width是元素自身宽度，和外部的margin、内部的padding不属于同一维度的属性。

内容的提问来源于stack exchange，提问作者Milo