CSS3：如何删除柔性容器周围的白色边框？

继W3Schools的用于柔性容器的例子中，有以下示例： http://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_flexline CSS3：如何删除柔性容器周围的白色边框？

.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; 
 
}

<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>

我已附加的结果作为图像。该图像显示浏览器边缘和柔性容器之间的白色边框。

如何删除白色边框？

来源

2016-11-18 Peter

这不是一个白色边框，它只是HTML体。您的柔性容器不是完整的宽度。 – TheValyreanGroup

默认情况下，用户代理样式表对'body'元素应用'margin'，通常为'8px'。你可以通过使用'body {margin：0; }'。 – Ricky

@Ricky：太好了！ - 我已经添加了'body {margin：0; }进入CSS-File的顶部，白色的“边框”消失了。我不知道默认的用户代理样式表是8px。我想评价你的答案有帮助。 – Peter

尝试添加CSS规则的容器：

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

或者让你的Flex容器全宽。例如像这样：

min-width: 100vw;

它是一个很好的做法在你的CSS顶部的所有paddings和margins复位：

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

这将防止问题的发生，如本

来源

2016-11-18 19:06:07

它解决了问题吗？ –

You拼写错误_padding_ – TheValyreanGroup

@TheValyreanGroup，谢谢，我已更正） –

您所看到的边框是html默认浏览器边距。这是一个很好的做法，可以将所有margin和padding元素：

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

并请始终避免对你的CSS !important，这是一个非常糟糕的做法，这使得难以重用/维护你的代码。

来源

2016-11-18 20:00:37

如果问题是由于缺乏对身体的浏览器复位的，我通常会添加以下到我的网站/应用：https://jsfiddle.net/j66gcfcj/

这样：

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

的解决方案的jsfiddle您的浏览器重置的一部分，你可以使用：

* { margin: 0; padding: 0; }

上面很容易解决您的问题，但会影响到你的网站的一切。我通常使用上述通配符实际应用box-sizing: border-box;为：

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

如果你不想影响你已经工作的网站，并希望严格注重柔性容器上，然后用以下内容：

.flex-container { 
    margin: 0; 
    }

你也可以做的一切通配符选择你的Flex容器内：

.flex-container * { 
    margin: 0; 
    }

，说要申请margin: 0到这两个弯曲的容器以及里面的东西吧：

.flex-container, 
.flex-container * { 
    margin: 0; 
    }

您可以通过了解更多有关浏览器重新设置为：

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

来源

2016-11-18 20:56:28 Pegues

CSS3：如何删除柔性容器周围的白色边框？

回答

相关问题