如何消除Header及搜索栏Div的侧边10px边距问题

问题场景 #

希望页面的Header及其下方的搜索栏Div能够紧贴网页两侧，但即便设置margin为0，仍存在10px的边距。已尝试设置body的margin为0，且Header采用absolute定位，top、left、right值均设为0，相关代码如下：

原CSS代码 #

#header{
    display: grid;
    position: absolute;
    top:0;
    left:0;
    right:0;
    height:90px;
    background-color: #00719e;
    text-align: center;
    grid-template-columns: 13% 13% 13% 22% 13% 13% 13%;
    min-width: 1570px;
    margin: 0px;

}

#searchBox{
    margin-top: 90px;
    height: 50px;
    background-color: aliceblue;
    margin-left: 0%;
    margin-right: 0%;
}

#cardsContainer{
    margin-left: 60px;
    margin-right: 60px;
    display: grid;
    grid-template-rows: 1fr;
    justify-items: center;
    align-items: center;
   }
    

.headerButton{width:200px; height:50px; justify-self: center; align-self: center;}

#searchInput{ width:1810px; height:45px; margin: 0%;}

#searchButton{height:50px; border-radius: 50%;}


#header{margin-right: 10px; margin-left: 10px; font-size: xx-large;}

原HTML代码 #

<!DOCTYPE html>
<html>
    <head> 
        <title>News</title> 
        <link rel="stylesheet" href="news.css">
    </head>
    <body style="background-color: aliceblue; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif ; color: #010022; ">
        <div id="header">
            <button id="sportButt" class="headerButton">Sports</button>
            <button id="entertainmentButt" class="headerButton">Entertainment</button>
            <button id="healthButt" class="headerButton">Health</button>
            <div id="logoCont" class="headerButton"></div>
            <button id="scienceButt" class="headerButton">Science</button>
            <button id="technologyButt" class="headerButton">Technology</button>
            <button id="economicsButt" class="headerButton">Economics</button>
        </div>
        <div id="searchBox">
            <input id="searchInput"/>
            <button id="searchButt">Search</button>
        </div>
        <div id="cardsContainer">
            
        </div>
    </body>    
</html>

解决方案 #

1. 移除冲突的Header边距设置 #

你的CSS代码末尾重复定义了#header样式，添加了margin-right:10px和margin-left:10px，这会直接覆盖之前设置的margin:0px，导致左右各10px的边距。删除这行重复样式即可：

/* 删除此行 */
#header{margin-right: 10px; margin-left: 10px; font-size: xx-large;}

如果需要保留字体大小，将font-size: xx-large合并到第一个#header的样式块中。

2. 重置Body的默认边距与内边距 #

浏览器默认会给body添加margin，需要显式重置：
在CSS开头添加：

body {
    margin: 0;
    padding: 0;
}

或者直接修改HTML中的body行内样式，补充margin:0;padding:0。

3. 让搜索栏紧贴两侧并自适应宽度 #

原#searchBox未设置宽度，无法占满屏幕，调整样式使其完全贴合两侧：

#searchBox{
    margin-top: 90px;
    height: 50px;
    background-color: aliceblue;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    box-sizing: border-box; /* 确保内边距/边框不会撑大宽度 */
    padding: 0 10px; /* 可选：给搜索框左右加内边距，避免内容贴边 */
    display: flex; /* 用flex布局让输入框和按钮垂直对齐 */
    align-items: center;
    gap: 5px;
}

4. 调整搜索输入框的自适应宽度 #

原#searchInput用固定宽度1810px会导致小屏幕溢出，改成自适应宽度：

#searchInput{
    width: calc(100% - 60px); /* 减去搜索按钮的宽度，留出空间 */
    height:45px;
    margin: 0;
}

最终调整后的完整CSS示例 #

body {
    margin: 0;
    padding: 0;
    background-color: aliceblue;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif ;
    color: #010022;
}

#header{
    display: grid;
    position: absolute;
    top:0;
    left:0;
    right:0;
    height:90px;
    background-color: #00719e;
    text-align: center;
    grid-template-columns: 13% 13% 13% 22% 13% 13% 13%;
    min-width: 1570px;
    margin: 0;
    font-size: xx-large; /* 合并之前的字体设置 */
}

#searchBox{
    margin-top: 90px;
    height: 50px;
    background-color: aliceblue;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 5px;
}

#cardsContainer{
    margin-left: 60px;
    margin-right: 60px;
    display: grid;
    grid-template-rows: 1fr;
    justify-items: center;
    align-items: center;
}

.headerButton{width:200px; height:50px; justify-self: center; align-self: center;}

#searchInput{
    width: calc(100% - 60px);
    height:45px;
    margin: 0;
}

#searchButton{height:50px; border-radius: 50%;}

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