在网页排版中，HTML5的<video>元素经常让开发者感到困惑：明明给上下都设置了相同的margin，实际显示时视频上方和下方留白却不一样。这种现象并不是浏览器bug，而是由替换元素与行内格式上下文的相互作用导致的。理解其中的原理，才能用对方法统一间距。
为什么video元素上下间距看起来不均
<video>在默认情况下属于行内替换元素（inline replaced element），即使它看起来是块状的。行内元素在排版时会受到父容器基线（baseline）的影响。浏览器为了给可能存在的文字描述符留位置，会在行内替换元素的底部保留一段基于line-height和font-size计算出来的额外空间。这部分空间并不来自margin，但视觉上就像下方间距变大了。
另一个容易被忽略的点是，很多开发者在CSS里只写了margin: 20px 0;，却没意识到父容器的font-size或line-height会间接改变行内盒的解析高度。当video作为行内元素参与布局时，它的外部行盒高度由自身和周围文字行高共同决定，于是上方贴着内容区、下方多出基线预留区，造成不均。用开发者工具查看盒模型时，往往能看到一个看不见的空白被算进了line box。
还有的情况是，某些旧版WebKit内核浏览器对video的默认样式带了额外的border或outline空间，配合未重置的body margin，会放大这种不对称。因此解决问题不能只盯margin，要先让video脱离行内上下文，或显式控制其显示类型与对齐方式。
用margin与display统一视频间距的实操
最直接的办法是把<video>变成块级元素，这样它就不再受行内基线规则约束。添加display: block;后，上下margin会按标准块级盒模型生效，只要数值一致，留白就一致。但要注意，仅仅block化有时还不够，如果父元素仍有较大line-height，相邻文本节点依旧可能带来视觉偏差，所以通常建议同时重置外层文字行高。
下面是一段常见的修正代码，通过统一margin并改变显示类型来消除不均：
/* 统一视频上下间距的基础写法 */
video.demo {
display: block; /* 脱离行内上下文 */
margin: 24px 0; /* 上下一致的外边距 */
line-height: 0; /* 清除行内残留行高影响 */
}
如果页面里有多个视频，可以用类选择器或元素选择器批量处理。对于需要兼容IE9以前的项目，还要留意旧引擎对video支持有限，但现代浏览器中上述写法已足够稳定。相比逐个用负margin去“硬调”，这种从显示类型入手的方案更可维护，也不会在窗口缩放时破版。
当视频放在flex或grid容器里时，margin的表现会更 predictable。例如在父容器写display: flex; flex-direction: column;，子video的上下margin将由flex布局算法控制，不会再混入基线空白。此时即便不写block，间距通常也是均匀的，因为flex item默认按块级格式化。
进阶：用布局容器彻底隔离视频排版影响
除了改video自身样式，更稳健的做法是用一层块级容器把视频包起来，由容器负责间距，video只做满宽或固定尺寸。这样即便video仍是行内替换元素，它的基线空间也被限制在容器内部，不会干扰和外部元素的留白关系。容器设margin: 20px 0;，内部video设display: block; width: 100%;，上下间隙就完全由容器决定。
示例结构如下，外层figure承担间距与对齐，内层video不再直接面对外部文本流：
<figure class="video-wrap">
<video class="player" controls>
<source src="https://ipipp.com/sample.mp4" type="video/mp4">
</video>
</figure>
对应样式将排版权交给容器：
.video-wrap {
margin: 20px 0;
line-height: 0;
}
.video-wrap .player {
display: block;
width: 100%;
height: auto;
}
这种结构还有一个好处：当需要在视频下方加说明文字时，figure的figcaption可以自然贴在视频底边缘，不会因为基线问题出现莫名空白。从架构上看，把“媒体对象”和“间距控制”分离，符合关注点分离原则，后期改版只需调整容器样式。配合CSS reset提前清空body与heading的默认margin，就能在整站范围内避免HTML5视频上下间距不均的反复踩坑。
HTML5_videomarginbox_model修改时间：2026-08-14 22:06:29