CSS3：如何删除flex-container周围的白色边框？

Question

按照w3schools上的flex-container示例，有以下示例： http://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_flexline

＆＃13;

＆＃13;

.flex-container {
  display: -webkit-flex;
  display: flex;
  width: 400px;
  height: 100%;
  background-color: lightgrey;
}
.flex-item {
  background-color: cornflowerblue;
  width: 100px;
  height: 100px;
  margin: 10px;
}

＆＃13;

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>
</div>

＆＃13;

＆＃13;

＆＃13;

我已将结果附加为图像。该图像显示浏览器边缘和flex-container之间的白色边框。

如何删除白色边框？

Answer 1

您看到的边框是html默认浏览器边距。重置所有边距和填充元素是一种很好的做法：

* { //* is known by wildcard, it selects all elements on the DOM
  margin: 0;
  padding: 0;
}

请务必在css上避免使用!important，这是一种非常糟糕的做法，而且重用/维护代码会变得更加困难。

Answer 2

如果问题是由于身体上缺少浏览器重置，我通常会将以下内容添加到我的网站/应用程序中：

1

解决方案的JSFiddle：https://jsfiddle.net/j66gcfcj/

作为浏览器重置的一部分，您可以使用：

html, body {
    width: 100%;
    height: 100%;
    }
    body {
        margin: 0;
        padding: 0;
        }

以上内容可以轻松解决您的问题，但会影响您网站中的所有内容。我通常使用上面的通配符实际应用* { margin: 0; padding: 0; } ，如下所示：

box-sizing: border-box;

如果您不想影响您已经处理过的网站，并希望严格关注Flex容器，请使用以下内容：

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }

您还可以对Flex容器内的所有内容进行通配符选择：

.flex-container {
    margin: 0;
    }

并且说你想将.flex-container * { margin: 0; } 应用于你的Flex容器以及其中的所有内容：

margin: 0

您可以访问以下网址了解有关浏览器重置的详情：

http://meyerweb.com/eric/tools/css/reset/

Answer 3

尝试为容器添加css规则：

.flex-container {
  margin: 0 !important;
}

或者让你的弹性容器全宽。例如：

min-width: 100vw;

最好重置CSS顶部的所有paddings和margins：

* {
  margin: 0 !important;
  padding: 0 !important;
}

这可以防止出现这样的问题