Question

我的网站上有几个视频，希望它们以一定的尺寸显示。一切正常，但由于某些奇怪的原因，3px被添加到每个视频标签的左侧。

我已经测试了以下内容，margin-right设置为0，并且仍然可以看到3px的空白区域，即使Firebug没有注册它。

如何解决此问题？感谢。

这是我正在使用的HTML -

<video class="video-preview" controls="">
    <source type="video/mp4" src="http://localhost/wp-content/uploads/2014/05/Everyone-Bat-Out-of-Hell.mp4"></source>
    Sorry, your browser is old and doesn't support the HTML5 'video' tag. Sucks to be you...
</video>

这是CSS -

video{
    background-color: #FFFFFF;
    cursor: pointer;
    vertical-align: middle;
}
#gallery .video-preview{
    height: 118px;
    margin-right: 20px;
    margin-bottom: 20px;
    width: 210px;
}

Answer 1

默认情况下，video元素为inline，标记之间的空格会以它们之间的空格呈现。就像你有<span>a</span> <span>b</span>一样，它会被渲染为：a b。因此，如果您有以下内容：

<video>....</video>
<video>....</video>
<video>....</video>

每个视频元素之间会有一个空格。 Fiddle

最快和最脏的解决方案是将下一个打开的标记放在结束标记旁边：

<video>....</video><video>
....</video><video>
....</video>

Fiddle

根据您的布局，还有其他选项。您可以为视频元素添加负右边距。不过，浏览器并不总是这样。

下一个选项是制作视频元素block并将其向左浮动。

 video 
 {
      display:block;
      float:left;
 }

Fiddle

根据您的布局，您可能需要进一步调整此方法。

<video>标记向右侧添加3px的空白</video>

1 个答案: