在HTML + CSS中引入图像和视频之间统一的垂直和水平间距？

Question

类似于问题vertical spacing between images，我如何介绍之间的间距

• 视频和图像
• 图像和图像
• 视频和视频

假设所有这些对象具有相同的高度，以统一的方式使用HTML5 + CSS？让我们说，我有一个包含10个对象的列表，每个对象都是<IMG height=600 ...>或<VIDEO height=600 ...>...</VIDEO>，我想在每对这样的对象之间引入大约1ex的垂直空间和相同的水平空间。网页应该是可见的，没有水平滚动（只要视口宽度至少与最大图像/视频的宽度一样大）。

至于水平间距，到目前为止我最好的尝试是在两者之间写 ，这非常有效。但如何达到统一的垂直空间？不幸的是，在视频对象上使用边距或填充CSS属性会使其基线与图像的基线不同。

Answer 1

您可以使用元素和css的包装器来实现这一点。像这样的东西：

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

li {
  margin: 5px;
  float: left
}

<ul>
  <li><img src="http://via.placeholder.com/150x150"></li>
  <li><img src="http://via.placeholder.com/150x150"></li>
  <li><img src="http://via.placeholder.com/150x150"></li>
  <li><img src="http://via.placeholder.com/150x150"></li>
  <li><img src="http://via.placeholder.com/150x150"></li>
  <li><img src="http://via.placeholder.com/150x150"></li>
  <li><img src="http://via.placeholder.com/150x150"></li>
  <li><img src="http://via.placeholder.com/150x150"></li>
  <li><img src="http://via.placeholder.com/150x150"></li>
</ul>