title: Introduce uniform vertical and horizontal spacing between images and videos in HTML+CSS?
body: <p>Similar to the question <a href="https://stackoverflow.com/questions/6539462/vertical-spacing-between-images">vertical spacing between images</a>, how do I introduce spacing between </p>
  
  <ul>
  <li><p>videos and images</p></li>
  <li><p>images and images</p></li>
  <li><p>videos and videos</p></li>
  </ul>
  
  <p>using HTML5+CSS in a <em>uniform</em> way, assuming that all these objects have the same height? Let's say, I have a list of 10 objects, each of which is either an <code>&lt;IMG height=600 ...&gt;</code> or a <code>&lt;VIDEO height=600 ...&gt;...&lt;/VIDEO&gt;</code>, and I'd like to introduce around 1ex vertical space and the same horizontal space between each pair of such objects. The web page should be viewable without horizontal scrolling (as long as the viewport width is at least as large as the width of the largest image/video).</p>
  
  <p>As for horizontal spacing, my best try so far was to write <code>&amp;nbsp;</code> in between, which works marvelously. But how to reach a uniform vertical space? Using margin or padding CSS property on video objects shifts their baseline differently than that of images, unfortunately...</p>