没有。video 元素默认无 margin,但因 display: inline 和 baseline 对齐,在行内布局中受 line-height、font-size 及换行符影响而“看似”有上下空隙。
video 元素默认有 margin 吗?
没有。HTML5 的 是替换元素(replaced element),本身不带默认 margin,但浏览器会为它应用默认的 display 值(通常是 inline)和相关排版行为——这会导致它像文字一样参与行内布局,受 line-height、vertical-align 和父容器字体大小影响,从而在上下“看起来”有空隙。
常见现象:视频上方紧贴标题,下方却多出 4–6px 空白;或多个 垂直堆叠时间距忽大忽小。
为什么 margin: 0 不总能解决问题?
因为问题往往不在 margin,而在:
-
默认是display: inline,底部对齐基线(baseline),下方留出“字母 g、j 下延部分”的空间 - 父容器若设置了
font-size或line-height,会放大这个间隙 - 视频后紧跟换行符或空白字符,也会被渲染为一个空格,参与行内流
解决建议:
立即学习“前端免费学习笔记(深入)”;
- 强制设为
display: block(最常用、最直接) - 或设
vertical-align: top/middle/bottom(适合仍需行内布局的场景) - 避免在
标签前后写换行或空格(即写成而非分多行)
统一控制上下间距的可靠写法
目标是让每个 上下留白一致、可预测,且不依赖父级字体设置: