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 主轴对齐策略强制定位了。
立即学习“前端免费学习笔记（深入）”；
常见误配场景：
