CSS实操问题：如何让形状铺满页面边框？

嘿，我懂你遇到的这个小困扰！这其实是浏览器的默认样式在搞鬼～大多数现代浏览器都会给<body>元素默认设置了margin: 8px左右的外边距，这就导致你的灰色条被挤得没法贴合页面的左右边框啦。

快速修复方案 #

只需要在你的CSS里给body加上两行代码，去掉它的默认内外边距：

body { 
  background-color: #181818;
  margin: 0; /* 清除浏览器默认的外边距 */
  padding: 0; /* 清除浏览器默认的内边距 */
}
.greybar { 
  display: block; 
  height: 48px; 
  background-color: #202020;
}

补充说明 #

• 块级元素（比如你用的<div>）默认是width: 100%的，所以不需要额外给.greybar加宽度属性，只要去掉body的默认边距，它自然就会铺满整个页面宽度了。
• 如果之后你遇到其他元素也有类似的默认样式问题，也可以用全局重置的方式（比如* { margin: 0; padding: 0; }），不过全局重置要谨慎使用，避免影响你不想修改的元素样式哦～

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