css - 如何减少HTML5视频标签之间的差距

Question

如何减少两个视频标签之间的差距，我试过用边距和填充它没有用任何帮助表示赞赏

DEMO

我的 HTML

<div class="videoTest">
    <video controls="controls"></video>
    <video controls="controls"></video>
    <video controls="controls"></video>
    <video controls="controls"></video>
</div>

我的 CSS

.videoTest > video{
    border:1px solid red;
    margin:0;
    padding:0;    
}

Answer 1

<video>元素默认是一个内联元素。这就是为什么它们之间存在间隙，代表标记中的空格和/或换行符。

.videoTest > video {
    display: inline-block;
    border:1px solid red;
    margin:0;
    padding:0;    
}

.videoTest {
    font-size: 0;
}

通过使用 font-size: 0 ，换行符和空格被忽略了，你摆脱了差距。它们的大小设置为 0。

Updated Fiddle

这是使用 inline-blocks 时的常见解决方法并且在某些情况下优于 floats例如，当涉及到居中时。