在HTML CSS中的图像和视频之间引入均匀的垂直和水平间距

Question

类似于图像之间的垂直间距的问题，我如何在

之间引入间距

• 视频和图像

• 图像和图像

• 视频和视频

假设所有这些对象都具有相同的高度，则以A 均匀方式使用HTML5 CSS？假设我有10个对象的列表，每个对象都是<IMG height=600 ...>或<VIDEO height=600 ...>...</VIDEO>，我想在1EX垂直空间围绕围绕1Ex的垂直空间以及每对此类对象之间的相同水平空间。网页应无需水平滚动即可查看（只要视口宽度至少与最大图像/视频的宽度一样大）。

至于水平的间距，到目前为止，我最好的尝试是在中间写 ，这很有用。但是如何到达统一的垂直空间？不幸的是，在视频对象上使用保证金或填充CSS属性以不同于图像的基线移动不同...

Answer 1

您可以使用元素的包装器来实现它，＆amp;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>