【问题标题】：Why is there a tiny indent on the left side of the footer? [duplicate]为什么页脚左侧有一个小缩进？ [复制]
【发布时间】：2021-08-23 09:46:04
【问题描述】：

问题

当我运行我的代码（稍后显示）时，我的代码左侧有一个小缩进。我试着把窗户变小，看看是否只是因为窗户太大，但没有运气。我还尝试删除所有可能是原因的边距和填充，但正如您可能已经猜到的那样，没有运气。我还尝试让页脚变大以掩盖缩进，但没有奏效。

问题

为什么侧面有缩进？
如何修复缩进？
如果左侧有缩进，为什么右侧没有缩进？

代码

body {
    font-family: "Lato", sans-serif;
    background: #0f0f0f;
}

.messages {
    color: #fff;
    bottom:0;
}

h1 {
    color: #fff;
    text-align: center;
}

h2 {
    color: #fff;
    padding-left: 25px;
}

.main {
    margin-left: 160px;
    font-size: 20px;
    padding: 0px 10px;
}

.main p {
    color: #fff;
    padding-left: 25px;
}

.main a {
    text-decoration: none;
    color: #fff;
}

.main a:hover {
    color: #aaaaaa;
}

.topnav {
    overflow: hidden;
    background-color: #0a0a0a;
}

input {
    background-color: #000000;
    color: #fff;
    border: 2px solid #fff;
    height: 25px;
    border-radius: 5px;
    font-size: 20px;
    margin-top: 7.5px;
}

.topnav a {
    float: left;
    color: #818181;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.topnav a:hover {
    color: white;
    cursor: default;
}

.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding-bottom: 10px;
    text-align: center;
    background-color: #505050;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
    <body>
        <div class="topnav">
            <a href="#">Back</a>
            <input id="search" type="text" placeholder="search for a member..." autocomplete="off">
        </div>
        <div class="main">
        </div>
        <div class="footer">
            <input type="text" name="Message" placeholder="Leave a message...">
        </div>
    </body>
</html>

【问题讨论】：

标签： html css

【解决方案1】：

也许这是我理解您的问题的解决方案。所以你希望你的内容和浏览器边框之间没有间距。

我认为应该对您有所帮助的尝试

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    body {
    font-family: "Lato", sans-serif;
    background: #0f0f0f;
    margin: 0px;
}

.messages {
    color: #fff;
    bottom:0;
}

h1 {
    color: #fff;
    text-align: center;
}

h2 {
    color: #fff;
    padding-left: 25px;
}

.main {
    margin-left: 160px;
    font-size: 20px;
    padding: 0px 10px;
}

.main p {
    color: #fff;
    padding-left: 25px;
}

.main a {
    text-decoration: none;
    color: #fff;
}

.main a:hover {
    color: #aaaaaa;
}

.topnav {
    overflow: hidden;
    background-color: #0a0a0a;
}

input {
    background-color: #000000;
    color: #fff;
    border: 2px solid #fff;
    height: 25px;
    border-radius: 5px;
    font-size: 20px;
    margin-top: 7.5px;
}

.topnav a {
    float: left;
    color: #818181;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.topnav a:hover {
    color: white;
    cursor: default;
}

.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding-bottom: 10px;
    text-align: center;
    background-color: #505050;
}
    </style>
</head>
<body>


        <div class="topnav">
            <a href="4.html">Back</a>
            <input id="search" type="text" placeholder="search for a member..." autocomplete="off">
        </div>
        <div class="main">
        </div>
        <div class="footer">
            <input type="text" name="Message" placeholder="Leave a message...">
        </div>

</body>
</html>

【讨论】：

【解决方案2】：

<body> 具有来自用户代理样式表的默认 margin: 8px。如果将margin: 0 auto 添加到正文中，则页脚上的剩余空间将消失。

body {
    font-family: "Lato", sans-serif;
    background: #0f0f0f;
    margin: 0 auto;
}

.messages {
    color: #fff;
    bottom:0;
}

h1 {
    color: #fff;
    text-align: center;
}

h2 {
    color: #fff;
    padding-left: 25px;
}

.main {
    margin-left: 160px;
    font-size: 20px;
    padding: 0px 10px;
}

.main p {
    color: #fff;
    padding-left: 25px;
}

.main a {
    text-decoration: none;
    color: #fff;
}

.main a:hover {
    color: #aaaaaa;
}

.topnav {
    overflow: hidden;
    background-color: #0a0a0a;
}

input {
    background-color: #000000;
    color: #fff;
    border: 2px solid #fff;
    height: 25px;
    border-radius: 5px;
    font-size: 20px;
    margin-top: 7.5px;
}

.topnav a {
    float: left;
    color: #818181;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.topnav a:hover {
    color: white;
    cursor: default;
}

.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding-bottom: 10px;
    text-align: center;
    background-color: #505050;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
    <body>
        <div class="topnav">
            <a href="4.html">Back</a>
            <input id="search" type="text" placeholder="search for a member..." autocomplete="off">
        </div>
        <div class="main">
        </div>
        <div class="footer">
            <input type="text" name="Message" placeholder="Leave a message...">
        </div>
    </body>
</html>

【讨论】：