Html 视频容器之间的边距空间

我在尝试在网站上隔开这些视频容器时遇到了一些问题。这是你的电话号码。我试图使网格间距在边缘上相等。现在，容器之间水平边距的宽度比垂直边距厚。看起来我使用的边距代码使用的是环绕边距，相邻放置时边距加倍。我试过做右边距和左边距，但都不起作用

非常感谢你的帮助

代码如下：

#gallery { margin-top: 10px; margin-bottom: 100px;
}

.video-container {
    width: 310px;
    margin-right: 7px;
    height: 310px;
    border-radius: 0px;
    overflow: hidden;
    display: none; float: left;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    text-align: center;
    position: relative;
}

---

在YouTube链接中的图像之前会出现换行符（
），这些图像会向容器添加垂直边距。例如：

<li>
    <a href="http://www.youtube-nocookie.com/embed/vcdMZrmdwKU?iframe=true&amp;width=853&amp;height=480" rel="prettyPhoto[iframes]">
    <br>
    <img src="http://8-playerpictures.com/wp-content/uploads/2014/04/Kinekt-Gear-Necklace.png" alt="Kinekt Design: Gear Necklace">

如果您可以找出这些内容的来源并消除它们，那么您可以使用普通CSS控制容器的垂直间距