Css 100%宽度flexbox内的额外边距

我想根据材料设计制作一个appbar

我写的代码试图使用100%宽度的flexbox来绘制这个

.appbar {
  display: flex;
  flex-direction: row;
  align-items: center;

  width: 100%;
  height: 48px;

  box-sizing: border-box;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.46);
}

但我在appbar中获得了额外的利润。为什么会这样

---

添加

边距：0
padding:0至
正文
正文{
保证金：0；
填充：0；
}
.appbar{
显示器：flex；
弯曲方向：行；
对齐项目：居中；
背景色：红色；
宽度：100%；
高度：48px；
框大小：边框框；
盒影：0 2px 5px 0 rgba（0,0,0,0.46）；
}
Try
body{margin:0；padding:0；}
body
默认有边距在大多数主流浏览器中，默认边距为8px。它由浏览器提供的用户代理样式表以像素为单位定义。所以你需要删除正文的空白。我没有考虑默认的正文标记，my false。