如何使用Flexbox让Div靠左并消除左侧间距？

兄弟，我太懂你这种明明给容器和目标Div设了margin、padding为0，却还是有左侧小间距的郁闷了！其实问题根源不在你写的.container和.box上，而是浏览器自带的默认样式在搞鬼——绝大多数浏览器会给<body>标签默认设置margin: 8px左右，这就是你看到的左侧间距来源。

下面是修正后的完整代码，帮你彻底解决这个问题：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 先重置body的默认margin和padding，消除页面级的间距 */
body {
  margin: 0;
  padding: 0;
}

.container{ 
  display:flex; 
  margin: 0; /* 确保容器本身无外边距 */
  padding: 0; /* 确保容器本身无内边距 */
}

.box{ 
  background-color:black; 
  color: white; /* 可选：加白色文字让内容更清晰 */
  padding: 10px; /* 可选：给盒子加内边距，避免文字贴边缘 */
}
</style>
</head>
<body>
<div class="container">
<div class="box">box</div>
</div>
</body>
</html>

关键说明： #

• 第一步必须重置<body>的默认样式，因为浏览器的用户代理样式表会给body加默认margin，这是最容易被忽略的点。
• 虽然你之前给.container设了margin和padding为0，但如果body的默认margin没清掉，整个页面的内容还是会和浏览器边缘有间距。
• 给.box加color: white是为了让黑色背景上的文字能看清，属于可选优化；加padding是避免内容直接贴在盒子边缘，提升视觉体验。

内容的提问来源于stack exchange，提问作者Canto.III