Css 移除视频播放器下方的填充物

在以下布局中，视频播放器正下方显示一些填充：

<div class="furlHtmlCont">
   <div style="display: table;">
      <video controls="" autoplay="" class="furlHtml5Video">
          <source type="video/mp4" src="https://dwknz3zfy9iu1.cloudfront.net/uscenes_h-264_hd_test.mp4">
      </video>
   </div>
</div>

如果删除边框和框阴影，白色填充将消失。有没有办法保持这种状态，但避免底部的填充物

---

更新：通过在furlHtml5Video css类上设置

display:block

，它将消除填充。不过，如果还有其他方法，那就太好了，因为在某些情况下，我需要一个表格。

您可以设置

字体大小：0

到您的

视频

的父级

div

，即您的

.furlHtmlCont

类

.furlHtml5Video{
最大宽度：300px；
背景色：#ff0000；
}
furlHtmlCont先生{
字号：0；
显示：内联块；
盒影：0 0 8px#c0；
左边框：1px实心#C0C0；
右边框：1px实心#C0C0；
边框底部：1px实心#C0；
边框左下半径：3px；
边框右下半径：3px；
}

---

有一个

div

将

视频

包装到其中，显示为

表格

，因此，您可以将子元素（即视频或

.furlHtml5Video

的显示更改为

表格单元格

，或将其垂直对齐更改为

顶部

，以删除视频播放器底部的

填充

.furlHtml5Video{
最大宽度：300px；
背景色：#ff0000；
显示：表格单元格；/*垂直对齐：顶部*/
}
furlHtmlCont先生{
显示：内联块；
盒影：0 0 8px#c0；
左边框：1px实心#C0C0；
右边框：1px实心#C0C0；
边框底部：1px实心#C0；
边框左下半径：3px；
边框右下半径：3px；
}

也许您可以使用媒体查询。默认情况下，您根据特定条件设置为

display:block

，并设置为

display:table

。@AndroidDev您甚至可以通过使用display:table来实现这一点，而不需要额外的div来包装视频标签，为了简单起见，我省略了其他内容，需要额外的div。但是你使用表格单元格的想法确实有效。万分感谢！欢迎@AndroidDev:-）

.furlHtml5Video {
    max-width: 300px;
    background-color: #ff0000;
}

.furlHtmlCont {
    display: inline-block;
    box-shadow: 0 0 8px #c0c0c0;
    border-left: 1px solid #c0c0c0;
    border-right: 1px solid #c0c0c0;
    border-bottom: 1px solid #c0c0c0;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}