<div>元素出现意外边距的问题求助

你遇到的页面间隙是浏览器默认样式导致的：绝大多数浏览器会给<body>标签设置默认的margin: 8px，同时<p>标签也自带上下外边距，这两个因素共同造成了你看到的间隙——和你设置的.box样式无关，所以调整box的margin/border/padding自然没用。

直接修改CSS，添加以下规则就能解决：

* {
  box-sizing: border-box;
}

/* 重置body的默认边距和内边距，消除页面整体间隙 */
body {
  margin: 0;
  padding: 0;
}

/* 可选：重置p标签的默认边距，避免内部文本贴边或产生额外间隙 */
p {
  margin: 0;
  padding: 10px; /* 可根据需求调整内边距大小 */
}

.box {
  float: left;
  width: 50%;
}

#box1 {
  background-color: grey;
}

#box2 {
  background-color: lightblue;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

修改后，两个div会完全贴合页面边缘，并且保持并排显示的效果。另外，你用float实现并排的方式是可行的，也可以考虑用更现代的Flexbox布局（比如给.clearfix添加display: flex，去掉.box的float），不过对于新手来说，你当前的写法完全没问题。

内容的提问来源于stack exchange，提问作者Thinchance