Stellen Sie einen einheitlichen vertikalen und horizontalen Abstand zwischen Bildern und Videos in HTML + CSS her?

Question

ähnlich wie bei der Frage vertical spacing between images, wie kann ich Abstand einführen zwischen

• Videos und Bildern

• Bildern und Bildern

• Videos und Videos

mit HTML5 + CSS in einer Uniform Weg, ass dass alle diese Objekte die gleiche Höhe haben? Nehmen wir an, ich habe eine Liste von 10 Objekten, von denen jedes entweder ein <IMG height=600 ...> oder ein <VIDEO height=600 ...>...</VIDEO> ist, und ich möchte ungefähr 1ex vertikalen Raum und den gleichen horizontalen Abstand zwischen jedem Paar solcher Objekte vorstellen. Die Webseite sollte ohne horizontales Scrollen sichtbar sein (solange die Breite des Darstellungsbereichs mindestens so groß wie die Breite des größten Bildes/Videos ist).

Wie bei den horizontalen Abständen war mein bisher bester Versuch,   dazwischen zu schreiben, was wunderbar funktioniert. Aber wie erreicht man einen einheitlichen vertikalen Raum? Mit Rand oder Padding CSS-Eigenschaft auf Video-Objekte verschiebt ihre Grundlinie anders als die der Bilder, leider ...

Answer 1

Sie können dies mit einem Wrapper für Ihre Elemente erreichen & css. So etwas:

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>