内联显示留白空间

Question

At the bottom of this page I have a media gallery. The first three photos are the photo gallery, Inlined after it I placed some video thumbnails. For some reason the alignment of each element of the video gallery is messed up. Can you help me?

This is the HTML of each video thumbnail:

<?php  if((get_post_meta($post->ID, 'url_video3', true))) { ?>
<div class="video_container">
<a href="#TB_inline?inlineId=url_video3&width=600&height=400" class="thickbox video">
<?php $attachment_id = get_field('icona_video3'); echo wp_get_attachment_image( $attachment_id, icona); ?>
<div class="play-icona"><img src="<?php bloginfo('template_url'); ?>/images/video_link.png" /></div>
</a>
</div>
<?php } ?>

And this is the CSS:

.thickbox.video {
text-decoration: none !important;
width: 96px !important;
height: 96px !important;
}
.video_container {
position: relative;
display: inline-block;
height: 96px !important;
width: 96px !important;
margin: 0 !important;
padding: 0 !important;
}
.play-icona {
position:absolute;
left:35%;
top:35%;
}

Answer 1

Generally speaking, inline-block elements respect surrounding whitespace (following the standard whitespace collapsing rules). If rendering an element with inline-block causes noticeable gaps around the element, make sure the two elements in HTML are right up against one another — if there are any newlines or spaces, they'll get translated into a gap by the web browser.