Video 元素包裝器上的奇怪附加寬度
潮汐
我將視頻標籤包裝在一個 div 中，以相對於視頻播放器定位一些組件，無論視頻大小如何。但是我一直無法找到為我的包裝容器增加了一些額外寬度的東西。
.video-pop-up{
display: none;
}
.video-pop-up.open{
position: fixed;
top:0;
left:0;
width:100vw;
height:100vh;
background: rgba(0,0,0,0.8);
z-index: 99;
display: grid;
place-items: center;
}
.video-pop-up.open video{
max-width: 95%;
max-height: 95%;
}
.video-wrap{
position: relative;
}<div class="video-pop-up open">
<div class="video-wrap">
<video controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</div>
</div>容器有這麼大：
視頻元素本身就這麼大：
誰能看到是什麼導致了我的包裝容器的寬度增加？
抗微生物藥物管理局
.video-pop-up.open video{
max-width: 95%;
max-height: 95%;
}
這就是造成那個空白空間的原因。它不是填充或邊距，而是內容框。在子元素（視頻）中，您指定視頻僅佔用父容器寬度的 95% 和父容器高度的 95%。所以你的父容器內容框現在有 5% 的空白寬度和 5% 的空白高度。
將其更改為
.video-pop-up.open video{
max-width: 100%;
max-height: 100%;
}
或者完全刪除它，視頻將佔用 .video-wrap 容器的 content-box 中的所有空間。
編輯：標點符號。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
编辑于
相关文章
TOP 榜单
- 1
隐藏发件人没有短信PHP
- 2
材质UI垂直滑块。如何改变在垂直材料UI滑块导轨的厚度（反应）
- 3
在Windows 7中无法删除文件（2）
- 4
HttpClient中的角度变化检测
- 5
Azure VM启动/停止日志
- 6
如何在 Vb.net 中使用函数返回多个值
- 7
Powerpoint-条形长度错误的堆积条形图
- 8
最新歌剧断断续续的快速拨号和渲染错误
- 9
Mac OS X更新后的GRUB 2问题
- 10
需要公式以vlookup逗号分隔单个单元格中的值
- 11
Hashchange事件侦听器在将事件处理程序附加到事件之前进行侦听
- 12
ggplot：对齐多个分面图-所有大小不同的分面
- 13
OS X-为什么我需要打开WiFi才能确定最近的位置
- 14
用日期数据透视表和日期顺序查询
- 15
Java Eclipse中的错误13，如何解决？
- 16
如何在Django中使用UUID
- 17
加载Microsoft Visual菜单时出现问题
- 18
具有if条件的SQL UPDATE
- 19
从JSON到JSONL的Python转换
- 20
如何在Kod中更改字体？
- 21
共享图像将路径放入地址
我来说两句