如何缩小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.

更新小提琴

这是一种常见的解决方法,在使用时,inline-blocks并且在某些情况下优于floats例如中心化.

Answer 2

我找到了提供解决此问题的各种方法的链接，可能对某些人有帮助参考：http://css-tricks.com

克里斯·科伊尔于 2012 年 4 月 21 日发表

事情是这样的：一系列内联块元素的格式就像通常的 HTML 格式一样，它们之间会有空格。

换句话说：

<nav>
  <a href="#">One</a>
  <a href="#">Two</a>
  <a href="#">Three</a>
</nav>

nav a {
  display: inline-block;
  padding: 5px;
  background: red;
}

将导致：

通常非常不受欢迎（检查输出的链接）

我们经常希望元素相互对抗。就导航而言，这意味着它避免了尴尬的不可点击的小间隙。

这不是一个“错误”（我不认为）。这就是在一行上设置元素的工作方式。您希望输入的单词之间有空格吗？这些块之间的空格就像单词之间的空格一样。这并不是说不能更新规范以表明内联块元素之间的空格应该为零，但我相当确定这是一个不太可能发生的巨大蠕虫。

这里有一些方法可以弥补间隙并使内联块元素直接相邻。删除空格

得到空格的原因是因为元素之间有空格（为了清楚起见，换行符和几个制表符算作空格）。最小化 HTML 将解决这个问题，或者使用以下技巧之一：

<ul>
  <li>
   one</li><li>
   two</li><li>
   three</li>
</ul>

或者

<ul>
  <li>one</li
  ><li>two</li
  ><li>three</li>
</ul>

或带有评论...

<ul>
  <li>one</li><!--
  --><li>two</li><!--
  --><li>three</li>
</ul>

它们都很时髦，但确实有效。负裕度

您可以将元素快速移回原位，并留出负 4 像素的边距（可能需要根据父级的字体大小进行调整）。显然，这在较旧的 IE（6 和 7）中是有问题的，但如果您不关心这些浏览器，至少您可以保持代码格式干净。

nav a {
  display: inline-block;
  margin-right: -4px;
}

跳过结束标签

无论如何，HTML5 并不关心。虽然你必须承认，但感觉很奇怪。

<ul>
  <li>one
  <li>two
  <li>three
</ul>

将字体大小设置为零

字体大小为零的空间...宽度为零。

nav {
  font-size: 0;
}
nav a {
  font-size: 16px;
}

马特·斯托报告说字体大小：0；技术在Android上存在一些问题。引用：“Pre-Jellybean 根本不会删除空间，而 Jellybean 有一个错误，即最后一个元素随机有一点空间。” 参见研究。另请注意，如果您以 em 为单位调整字体大小，则零字体大小可能会成为问题，因为 ems 级联子项的字体大小也将为零。Rems 在这里会有所帮助，否则任何其他非级联字体大小都会将其恢复。又一个怪事！Doug Stewart 向我展示，如果您将 @font-face 与此技术一起使用，字体将在 Safari 5.0.x 中失去抗锯齿功能。（测试用例）（屏幕截图）。只需将它们浮动即可

也许它们根本不需要内联块，也许它们可以以一种或另一种方式浮动。这允许您设置它们的宽度和高度以及填充等。你只是不能像通过 text-align: center; 那样将它们居中。内联块元素的父级。嗯……你有点可以，但很奇怪。只需使用 Flexbox 即可

如果您可以接受浏览器支持，并且您需要 inline-block 居中，那么您可以使用 flexbox。它们并不是完全可互换的布局模型或任何东西，但您可能会从中得到您需要的东西。