为何p元素margin设为0后，其边框仍未与视口边缘对齐？

这是因为浏览器的默认样式给<body>元素添加了默认margin值（通常是8px），你只给<p>标签设置了margin: 0px，但<body>本身的外边距还存在，所以红色的p元素和视口边缘之间会出现绿色的间距。

解决方法 #

给<body>元素也设置margin: 0px，就能让p元素的边框和视口边缘完全对齐。

修改后的CSS代码：

body {
  background-color: green;
  margin: 0px; /* 新增这一行清除body默认外边距 */
}

p {
  padding: 0px;
  background-color: red;
  margin: 0px;
  border-style: solid;
}

运行修改后的代码，红色p元素的顶部、左右侧边框就会和视口对应边缘直接对齐了。

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