如何去除HTML文本组件中自动添加的额外上下边距？

你看到的上下空白区域，是因为浏览器默认给<body>标签设置了margin值——哪怕你已经把<h1>的margin和padding都设为0，body的默认边距依然会导致这个问题。

只需要给<body>也添加margin: 0;的样式就能解决：

修改后的完整代码：

<!DOCTYPE html>
<html>
  <body style="margin: 0;">
    <h1 style="background-color: red; margin: 0px; padding: 0px">Hello World!</h1>
  </body>
</html>

如果需要更彻底地避免其他标签默认样式的干扰，也可以用全局选择器统一清除默认内外边距：

* {
  margin: 0;
  padding: 0;
}

将这段CSS放在<head>内的<style>标签中即可。

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