html出现的默认外边距消除不掉

如图，我写的代码运行出来两边会有默认的8.5px外边距

img

我试过了body{margin：0px;}没有用
代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>index</title>
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="css/common.css">
</head>
<body>
    <div class="header w">头部</div>
    <div class="box w">内容</div>
    <div class="footer w">底部</div>
</body>
</html>

base.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666;
}

common.css

.w {
    width: 1519px;
    margin: 0 auto;
}
.header {
    position: relative;
    height: 105px;
    background-color:red;
}
.footer {
    position: relative;
    height: 105px;
    background-color:green;
}

我也尝试过在style标签里面写以上样式，但没有出现8.5px的外边距
这到底是什么原因呢？

看一下右侧控制台都给第一个div赋值了哪些属性

你设置 margin: 0 auto; 让元素居中,左右外边距是auto
当窗口宽度大于元素宽度时为了让元素居中, 多于的宽度自然平分给左右外边距了

你去掉 margin: 0 auto; 就没有左右外边距了

如有帮助，请点击我的回答下方的【采纳该答案】按钮帮忙采纳下，谢谢!

img

width:1519px,
margin：0，auto，导致的
改成：

width:100%

如果你要适配的话，就用@media screen and (max-width: 1519px)