html - 宽度 100% 页脚问题 - HTML CSS

Question

我有一个大问题。我正在设计一个登陆页面，但我的页脚元素有问题！

我将其宽度设置为 100%，但是当我在浏览器中预览它时，它不是 100%，而是在左侧、右侧和底部留下了几个像素的边框。

这是页脚的 CSS：

footer {
width: 100%;
background: white;
height: 100px;
margin-top: 100px;

}

如果我添加以下内容，任何内容都会发生变化：left: 0px; 底部：0px；或对：0px；

我能怎么做？

如果我没有很好地解释问题，这是一张图片。

score 1 · Accepted Answer

似乎父元素（可能<body>或任何<div>）具有固定宽度或一些边距和/或填充。

width:100%;占用父元素提供的所有可用空间。例如，如果父级的宽度为 700 像素，那么您的页脚也会有这个。

score 1 · Accepted Answer

看起来您没有重置标签上的paddingandmargin值。body浏览器在那里使用一组标准的 CSS 规则，其中通常包括一些填充和边距。

将此添加到您的 CSS 中：

body { margin: 0; padding: 0; }

score 1 · Accepted Answer

看起来那是您的 body 元素的边距/填充，而不是页脚本身。尝试将以下内容添加到您身体的 CSS 标记中：

body
{
  margin:0;
  padding:0;
}

还将这两个属性添加到您的页脚 css 标记中，以确保它不会从另一个元素继承任何内容。

score 0 · Accepted Answer

这看起来是一个合并/填充问题。您可以重置主体的填充和页脚的边距，使其覆盖 100% 宽度

body {
    margin: 0px;
    padding: 0px;
}

footer {
    margin: 0px;
}

4 回答 4