移动端如何消除header、main与footer之间的空白？

问题说明 #

仅在移动端模式下，页面的header、main、footer区块之间出现蓝紫色间隙，该颜色来自body的背景色。已尝试使用CSS Reset/Normalize CSS，但问题仍未解决。

相关代码如下：

CSS代码 #

body {
  background-color: blueviolet;
}

header,
main,
footer {
  background-color: #fff;
}

h1,
h2,
p {
  margin: 0;
  padding: 0;
}

HTML代码 #

<header>
  <h1>this is header</h1>
</header>
<main>
  <h2>this is main</h2>
</main>
<footer>
  <p>this is footer</p>
</footer>

解决办法 #

这种移动端特有的间隙，通常是浏览器默认样式、元素空白间距或margin折叠导致的，试试以下几种方案：

• 清除body的默认内外边距，同时确保区块元素无默认margin：

  body {
    background-color: blueviolet;
    margin: 0;
    padding: 0;
  }
  header, main, footer {
    background-color: #fff;
    margin: 0;
  }
  

• 消除HTML标签间的空白间距：将header、main、footer的标签连写（如<header>...</header><main>...</main>），或给body设置font-size: 0后再给子元素恢复字体大小：

  body {
    background-color: blueviolet;
    font-size: 0;
  }
  h1, h2, p {
    margin: 0;
    padding: 0;
    font-size: 16px;
  }
  

• 给区块元素设置垂直对齐，避免基线对齐产生间隙：

  header, main, footer {
    background-color: #fff;
    vertical-align: top;
  }
  

优先尝试第一种方案，基本能解决大部分此类问题。

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