移除填充

在下面的佈局，有可能出現只是視頻播放器下方一些填充：如果我刪除邊框移除填充

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

和box-shadow，白色填充消失。有沒有辦法保持這一點，但避免在底部填充？

更新：通過在furlHtml5Video css類上設置display: block，它將擺脫填充。儘管如此，如果除此之外還有其他方法，那將會很棒，因爲在某些情況下我需要一張桌子。

來源

2017-08-26 AndroidDev

也許你可以使用媒體查詢。默認情況下，您將設置爲'display：block'並根據一定的條件設置爲'display：table'。 –

有一個div是包裝video到它是顯示爲table，所以你可以更改子元素，即視頻或.furlHtml5Video的顯示器table-cell或更改，因爲它是垂直對齊top在視頻播放器的bottom刪除padding，

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

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

來源

2017-08-26 07:06:41 frnt

@AndroidDev你甚至可以通過使用display：table來做到這一點，不需要額外的div來包裝視頻標籤，https://jsfiddle.net/5s3b7fj8/ – frnt

額外的div是我需要的其他東西所需要的爲了簡單起見。但是使用表格單元的想法確實有效。太感謝了！ – AndroidDev

歡迎@AndroidDev :-) – frnt

您可以將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>

來源

2017-08-26 06:49:38

回答

相關問題