Question

我正在实施一个响应式设计的页面。它的最小宽度为320px。当我将屏幕缩小到320px宽时，它周围仍然有一个小边框，这是<body>的一部分（我已将背景颜色设置为红色）。

enter image description here

我的CSS是：

body {
    background-color: red;
    color: #010109;
}

#newPageTable {
    position: relative;
    min-width: 320px;
    height: 100%;
    margin: 0px auto;
    border: 0px;
    padding: 0px;
    background-color: #FFFFFD;
}

如何摆脱这个边框空间并确保我的#newPageTable完全适合屏幕？

Answer 1

重置margin上的默认padding和body，如下所示：

body {
    background-color: red;
    color: #010109;
    margin: 0;
    padding: 0;
}

这样做会删除该空间。

Answer 2

默认情况下，某些浏览器的边缘周围有边距/填充。

其他元素默认也有边距/填充。

您可以为样式的开始添加重置，默认情况下关闭所有边距/填充：

*{
    margin: 0;
    padding: 0;
}

或者只是将它应用于body标签：

body{
    margin: 0;
    padding: 0;
}

如果您使用的话，有些重置样式表会为您解决此问题。

320px宽div的不需要的边框

2 个答案: