Question

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

<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>

CSS

.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;
}

https://jsfiddle.net/Deepview/L5mhyg2f/12/

如果我删除边框和框阴影，则白色填充消失。有没有办法保持这个，但避免在底部填充？

更新：通过在furlHtml5Video css类上设置display: block，它将摆脱填充。尽管如此，如果还有另外一种方法可以做到这一点，那就太好了，因为在某些条件下我需要把它放在桌子上。

Answer 1

您可以将font-size: 0;设置为video的父div，即您的.furlHtmlCont课程。

.furlHtml5Video {
  max-width: 300px;
  background-color: #ff0000;
}

.furlHtmlCont {
  font-size: 0;
  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;
}

<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>

Answer 2

有一个div将video包裹在其中，显示为table，因此您可以更改子元素的显示，即视频或.furlHtml5Video到{{ 1}}或将其垂直对齐更改为table-cell以移除top视频播放器上的padding，

＆＃13;

bottom

＆＃13;

.furlHtml5Video {
  max-width: 300px;
  background-color: #ff0000;
  display: table-cell; /*vertical-align:top*/
}

.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;
}

＆＃13;

删除视频播放器下方的填充

2 个答案: