div元素下方出现未知多余空白是什么原因？该如何排查解决？

你遇到的紫色空白块是浏览器默认样式带来的<p>标签外边距：浏览器自带的用户代理样式会给<p>标签默认添加上下外边距，你只给.menu-intro-h1设置了margin: 0清除默认边距，但没有处理<p>标签的默认样式，就会出现这个多余的紫色空白区域（开发者工具中紫色区域对应盒模型的外边距）。

解决方法如下：

• 第一步：清除<p>标签的默认外边距，可根据需要自行调整上下间距

.menu-intro-text p {
  margin: 0;
  font-size: 1.5em;
  /* 如果需要h1和p之间保留间距，可以自行添加margin-top，比如：
  margin-top: 12px;
  */
}

• 第二步：如果你需要实现.menu-intro-text内的文本垂直居中，给这个flex容器添加justify-content: center属性即可，同时可以删掉重复的flex-flow: column（和flex-direction: column功能重复）

.menu-intro-text {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  height: 300px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  max-width: 50%;
  overflow: hidden;
  padding: 20px;
  text-align: center;
}

额外提示：如果要避免其他元素也出现默认样式带来的异常，可以在CSS开头添加全局样式重置：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

内容的提问来源于stack exchange，提问作者Anđelo Motika