内联显示留下空白

Question

在this page的底部，我有一个媒体库。前三张照片是照片库，内联后我放了一些视频缩略图。由于某种原因，视频库的每个元素的对齐都搞砸了。你能救我吗？

这是每个视频缩略图的HTML：

<?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 } ?>

这就是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

一般来说，inline-block元素尊重周围的空格（遵循标准的空白折叠规则）。如果使用inline-block渲染元素会导致元素周围出现明显的间隙，请确保HTML中的两个元素相互对立 - 如果有任何换行符或空格，它们将被Web转换为间隙浏览器。