css - 视频应触及框的顶部和底部

Question

我这里有一段代码在绿色框中显示了一段视频，该视频用于我正在开发的网站。源显然不起作用，所以我将其替换为“xxxxxx”。

问题是视频下方有一个小空间，盒子太大了。

由于某种原因，盒子与视频不齐。

视频的两侧故意不接触边缘，但我希望视频的底部和顶部接触框。

我敢肯定它不会太复杂，它可能是我错过的一些简单的东西。

如果您需要更多信息，请询问。

谢谢你们。

<div style="background-color:#B9CFBB" align="middle">
      <video width="360" height="240" controls>
          <source src="xxxxxx">
          Your browser does not support the video tag.
      </video>
</div>

Answer 1

你应该给视频 display: block; 风格

video {
  /* video has a default display of inline */
  display: block;
}

<div style="background-color:#B9CFBB" align="middle">
      <video width="360" height="240" controls>
          <source src="xxxxxx">
          Your browser does not support the video tag.
      </video>
</div>

这是因为内联元素与周围的文本内容对齐显示。在这种情况下这可能是空的，但它有一个行高:由于 video 的默认 vertical-align 是 baseline，下行也需要空间这就是差距的来源。

您可以更改视频的垂直对齐方式，如下图所示(我添加了文本来演示该问题。)以解决该问题。

div {
  text-align: center;
}
video {
  /* video has a default display of inline */
  display: inline;
}

#two video {
  /* video has a default vertical-align of baseline */
  vertical-align: text-top;
}
#three video {
  vertical-align: -3em;
}

<div id="one" style="background-color:#B9CFBB">
fghpq before <video width="360" height="240" controls>
           <source src="xxxxxx">
          Your browser does not support the video tag.
      </video> after fghpq 
</div>

<div id="two" style="background-color:#F9CFBB">
      fghpq before <video width="360" height="240" controls>
          <source src="xxxxxx">
          Your browser does not support the video tag.
      </video> after fghpq 
</div>

<div id="three" style="background-color:#B9CFFB">
      fghpq before <video width="360" height="240" controls>
          <source src="xxxxxx">
          Your browser does not support the video tag.
      </video> after fghpq 
</div>