video元素无自动右边距行为，其右侧显示异常源于盒模型、响应式规则及父容器布局共同作用；需设max-width:100%+height:auto+display:block，并检查viewport、flex对齐及父级样式。
video 元素的右边距不是“自动变”，是 CSS 盒模型和响应式规则共同作用的结果
HTML5 本身没有“右边距自动变化”这种内置行为。你观察到的“右边距变小/消失/错位”，通常是父容器宽度收缩、margin/padding 未重置、或 width 设置为固定值（如 width: 640px）导致在小屏下溢出，浏览器被迫截断或触发横向滚动——此时视觉上像“右边距被吃掉”。
关键点在于：视频元素默认是 inline-level，会受父容器 text-align、行内空白、以及周围换行符影响；同时，现代响应式布局中，它常被嵌套在 Flex/Grid 容器里，而这些容器的对齐策略（如 justify-content: flex-end）会直接改变右侧留白表现。
用 max-width: 100% + height: auto 防止溢出并保留比例
这是最常被漏掉却最有效的一步。仅设 width: 100% 会导致高度塌陷或拉伸变形；只设 height: auto 又无法约束宽度上限。二者必须配合：
-
max-width: 100%确保视频不会撑破父容器（尤其在移动端） -
height: auto保持原始宽高比，避免黑边或挤压 - 务必移除写死的
width或height行内样式，否则会覆盖 CSS 规则
video {
max-width: 100%;
height: auto;
display: block; /* 消除底部空白（inline 默认行为） */
}Flex 容器中 justify-content 影响右侧空间，别盲目用 space-between
如果 被包在 display: flex 的 div 里，且设置了 justify-content: space-between，而容器内只有这一个子元素，那它会被推到最右——看起来像“右边距归零”，其实是被 flex 主轴对齐策略强制定位了。
立即学习“前端免费学习笔记（深入）”；
常见误配场景：
- 父容器有
padding-right，但子 video 设了margin-right: auto→ 抵消 padding，右侧贴边 - 用了
justify-content: flex-end却没意识到它会让内容靠右，而非“留右边距” - flex 容器本身 width 不足，video 被压缩后，外边距按百分比计算失真
建议优先用 justify-content: center 或显式控制 margin-left: auto; margin-right: auto 来居中，更可控。
viewport meta 和媒体查询缺一不可，否则响应式失效
即使 CSS 写得再准，如果页面没声明视口，移动端 Safari/Chrome 会以桌面宽度渲染（通常 980px），导致 max-width: 100% 实际作用在错误基准上，右边距“看起来没反应”。
检查这两处是否到位：
-
必须存在且无拼写错误 - 针对小屏的媒体查询要覆盖 video 的外层容器，例如：
@media (max-width: 768px) { .video-wrapper { padding: 0 16px; } }，而不是只改 video 本身 - 避免用
min-width媒体查询替代max-width—— 高频问题出现在小屏，不是大屏
真正难调的，往往不是 video 标签本身，而是它上面三层的 wrapper、section、main 的 padding/margin/border-box 计算叠加。先 inspect 元素看 computed styles，再逐层关掉父级 padding，比反复调 video 的 margin 更快定位问题。
