6

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

演示

我的 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;    
}
4

6 回答 6

13

默认情况下，该<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居中时。

于 2013-06-24T10:35:15.767 回答
3

尝试这个

http://jsfiddle.net/Ng6XU/5/

.videoTest > video{
    border:1px solid red;
    margin:0px;
    padding:0; 
    float:left;
}
于 2013-06-24T10:35:08.963 回答
3

试试这个 CSS ：

.videoTest > video{
    border:1px solid red;
    margin:0;
    padding:0;    
    float:left;
}
于 2013-06-24T10:36:28.140 回答
1

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

由 Chris Coyier 于 2012 年 4 月 21 日出版

事情是这样的：一系列像你通常格式化 HTML 那样格式化的 inline-block 元素之间会有空格。

换句话说：

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

它们都很时髦，但它确实有效。负边距

您可以使用负 4px 的边距将元素滑回原位（可能需要根据父级的字体大小进行调整）。显然这在较旧的 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;
}

Matt Stow 报告说 font-size: 0; 技术在Android上存在一些问题。引用：“Pre-Jellybean 根本不会删除空间，并且 Jellybean 有一个错误，即最后一个元素随机有一点空间。” 见研究。另请注意，如果您在 ems 中调整字体大小，则此零字体大小可能是一个问题，因为 ems 级联子项也将具有零字体大小。Rems 在这里会有所帮助，否则任何其他非级联字体大小都会将其备份。又一个怪事！Doug Stewart 向我展示了如果您使用 @font-face 和这种技术，字体将在 Safari 5.0.x 中失去抗锯齿功能。（测试用例）（截图）。只是浮动它们

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

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

于 2013-06-24T12:37:45.313 回答
1

由于 video 标签默认为 inline-block 元素，因此只需在 CSS 中将 video 标签设为块元素。鲍勃是你的叔叔。

video {display: block;}
于 2017-07-27T00:04:55.177 回答
0

就我而言，我使用 640x480 作为视频尺寸。我将其更改为 640x360 并删除了视频上方的空白区域。

于 2021-07-22T19:16:27.383 回答