网页底部出现约 10 像素的空白是常见布局问题，通常源于浏览器的默认样式设置。通过开发者工具检查发现，表单元素 form 被 user agent stylesheet 赋予了 margin-bottom: 1em 的默认属性。由于用户代理样式表优先级较低，可以通过自定义 CSS 直接覆盖该属性。将 form 的 margin-bottom 设置为 0px 即可消除多余间距，确保页面布局符合预期。
在调整网页布局时，经常会在底部发现莫名其妙多出 10 像素左右的空白，这其实是个很经典的问题。
通过 Chrome 浏览器的开发者工具（审查元素）检查，会发现有一个名为 user agent stylesheet 的样式规则给整个 form 元素设置了 margin-bottom: 1em;。
所谓的 user agent stylesheet，本质上是浏览器内置的默认样式表。如果对这些默认表现不满意，最直接的解决办法就是显式地覆盖这些属性。由于 user agent stylesheet 的优先级较低，只要我们在自定义 CSS 中定义相同的规则，就能将其覆盖掉。
以刚才的问题为例，只需将 form 的 margin-bottom 强制设为 0px：
form {
margin-bottom: 0px;
}
这样一来，底部的多余间距就被清除了，页面布局也能完全按照预期显示。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML转Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online
将JSON字符串修饰为友好的可读格式。 在线工具，JSON美化和格式化在线工具，online