最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
HTML标签自带的默认样式全汇总 建议收藏
时间：2026-06-17 09:35:47 编辑：袖梨 来源：一聚教程网
浏览器默认样式由各渲染引擎UA stylesheet动态实现，并非统一标准；常见布局问题源于少数标签（如h1–h6、p、ul、blockquote、pre）的默认margin/padding差异，且display类型、font-size、line-height均受系统及版本影响，应优先采用modern-normalize等现代重置方案而非通配符重置。
浏览器对 HTML 标签施加的默认样式不是标准，而是各引擎（WebKit、Blink、Gecko）各自实现的 UA stylesheet，所以没有“全汇总”这种静态清单——它随浏览器版本、平台（macOS/Windows/Linux）、甚至用户系统字体设置动态变化。
Chrome / Edge（Blink）里最常踩坑的默认 margin 和 padding
多数布局问题其实只来自少数几个标签的默认外边距：
-
<h1>到<h6>：上下margin通常为0.67em/0.83em（非整数，且基于当前 font-size 动态计算） -
<p>：上下margin约1em，左右为0 -
<ul>、<ol>：顶部margin~1em，左侧有padding-left: 40px（不是 margin！很多 reset 漏掉这点） -
<blockquote>：左右margin~40px，顶部底部也有 margin -
<pre>：自带white-space: pre和margin: 1em 0
这些值在 Chrome DevTools 的 “Computed” 面板里点开 margin 或 padding 就能看到真实数值，别信网上流传的“固定 16px”说法。
display 类型不统一，直接导致盒模型行为突变
比如 <span> 是 inline，但 <button> 在 Blink 中是 inline-block；<img> 默认 display: inline，却会触发基线对齐（baseline），造成父容器莫名留白——这不是 bug，是规范行为。
立即学习“前端免费学习笔记（深入）”；
-
<input type="text">、<select>、<textarea>：默认display: inline-block，可设width/height -
<table>及其子元素（<tr>、<td>）：强制使用表格布局，display: table系列，不能用 flex 直接控制子项 -
<details>：默认display: block，但内部<summary>是display: list-item（带默认 marker）
查 display 类型最稳的方式：选中元素 → Elements 面板 → 右侧 Styles 标签页 → 底部 “Computed” → 找 display 行。
font-size 和 line-height 依赖用户系统设置
<small> 不是固定缩小 80%，而是相对当前上下文的 font-size 计算；<h1> 的 font-size 在 Chrome macOS 上可能是 2em，Windows 上却是 1.8em —— 因为底层用了 system-ui 字体栈，而不同系统默认字号不同。
-
<body>默认font-size: 16px？仅当用户没改浏览器默认字号时成立（很多人调成 18px 或更大） -
<input>和<button>的font-size默认继承自body，但部分浏览器会强制最小字号（如 iOS Safari 强制 ≥16px 防缩放） -
line-height对<p>这类块级元素默认是normal（约 1.2），但实际渲染值取决于当前字体度量，无法跨字体复现
这意味着靠 em 或 rem 做精确行高控制时，必须配合 font-family 锁定，否则在用户换字体后会偏移。
reset.css 和 modern-normalize 的关键差异点
别再用老式 * { margin: 0; padding: 0; } 全局重置——它把 <fieldset> 的边框撑开逻辑、<hr> 的语义分隔意义全干掉了。
-
normalize.css保留有意义的默认行为（如<sub>/<sup>的 vertical-align、<audio>的宽高比例），只修正跨浏览器不一致 -
modern-normalize更激进：移除<button>的默认border（Blink 中是2px outset），重置<input type="search">的圆角和清除按钮样式 - 真正要“清空”时，优先用
all: unset（注意兼容性：IE 不支持，iOS Safari ≤15.4 有 bug）
最稳妥的做法：项目初期就决定用 modern-normalize 或 sanitize.css，而不是后期靠覆盖补丁硬调——默认样式的连锁反应远比你看到的多一层。
相关文章
- 魔神英雄传手游官网在哪下载 最新官方下载安装地址 07-11
- 魔神英雄传手游好玩吗 魔神英雄传手游玩法简述 07-11
- 《云之国》肉鸽模式初战记录 07-11
- 伊莫图鉴如何分享 07-11
- 风之痕迹骑士勋章材料如何获得 07-11
- 明日方舟终末地怎样实现干员养成与配队选择 07-11