h1默认上/下外边距约为21px,源于浏览器用户代理样式表,与body无关;仅设body{margin:0}无效,必须单独重置h1{margin:0}或h1,h2,h3,h4,h5,h6{margin:0}。

h1 默认 margin 是多少,为什么清不掉
大多数浏览器给 h1 设的默认上外边距是 21px(Chrome/Firefox/Safari 均如此),下外边距也是 21px 左右。它不是来自 body,而是 h1 自身的用户代理样式。所以只写 body { margin: 0; } 完全没用——h1 的 margin 依然会“冒”出来,尤其当它是 body 的第一个子元素时,还可能和 body 的 margin 折叠,直接撑开视口顶部。
最稳妥的清除写法:单独重置 h1 的 margin
别碰通配符,也别指望全局 reset 覆盖所有场景。直接定位问题元素:
h1 {
margin-top: 0;
margin-bottom: 0;
}
如果你要同时处理所有标题级标签,可以合并写:
h1, h2, h3, h4, h5, h6 {
margin: 0;
}
- 只设
margin: 0就够了,不用动padding(h1默认无 padding) - 不要写成
h1 { margin: 0 !important; }——除非被第三方 CSS 强行覆盖,否则没必要加!important - 如果项目用了 Normalize.css,它已将
h1的 margin 改为0.67em上下,此时你得覆盖这个值,而非21px
为什么有时候清了 margin 还有空隙
那大概率不是 margin,而是以下几种情况之一:
立即学习“前端免费学习笔记(深入)”;
-
line-height或font-size导致文字在容器内视觉上“悬浮”,实际是基线对齐造成的错觉 -
h1父容器(比如div或td)有padding,误以为是h1自己的间距 - 表格单元格里放
h1,border-collapse解决不了内部元素 margin,必须单独清h1的 margin - 使用了 Flex/Grid 布局后,
align-items或justify-content引入了额外对齐空间
要不要连带重置其他块级元素的 margin
看你的需求。如果只是修复某个 h1 的顶部白边,单写 h1 { margin: 0; } 最干净。但如果你在做全屏 landing page、卡片式布局或需要严格控制垂直节奏,建议一并处理常见“带坑”元素:
p, ul, ol, dl, blockquote, pre, figure {
margin: 0;
}
注意:ul/ol 除了 margin,还要加 list-style: none; 和 padding: 0; 才算真正清干净;p 的默认上下 margin 是 1em,不是像素值,响应式中更需留意。
真正容易被忽略的是:清除 h1 margin 后,如果它前面还有别的块级元素(比如 section 或 header),它们之间的外边距折叠行为会立刻暴露出来——这时候你得判断,是要保留语义化间距,还是统一用 padding 控制距离。



















