为什么在将内容插入Div容器（HTML-CSS）时我的布局会中断

我有一个简单的3柱布局

每当我将内容或图像插入这三列中的一列时，顶部或底部都会出现一个奇怪的边距，布局会中断

这是因为我没有标准化器吗

屏幕截图

这就是没有任何内容的div的布局。。。

当我在3个分区中添加任何内容时。。。

1）我摆弄了摆弄小提琴，注意到如果你显示img:block，问题就会消失。如果你的图像太高，它仍然会跳出框外，但除此之外，它工作正常

你在DIV上有一个设定的高度，所以这就是为什么图像会从框中跳出。如果你去掉这个高度就可以了

---

2） 放置垂直对齐：顶部也可以修复它。在这里发现：

你能显示问题的屏幕截图吗？请详细说明这个“奇怪的边距”。你正在插入一个html页面作为图像。我也这么认为。但是，对于我在问题编辑的截图中添加的那一段呢。这同样适用吗？我应该删除高度吗？我在上面更新了一些关于垂直对齐的内容。检查一下，“垂直对齐”起作用了（我觉得很奇怪，我认为你需要显示为表格单元格才能起作用）。有人知道这个小故障是从哪里来的吗？

<div class="e-container">

    <div class="edate">
        <!-- Content -->
    </div>

    <div class="eimage">   
         <!-- When I add this it breaks
        <img src="http://www.keenthemes.com/preview/metronic/theme/templates/admin/form_image_crop.html" width="300" height="200">-->
    </div>

    <div class="einfo">
        <!-- Content -->
    </div>
</div><!-- Container -->

.e-container {width: 100%;
border: 1px solid black;
height: auto;
text-align: center;}

.edate {
    width: 8em;
    height: 200px;
    border: 1px solid black;
    margin: 1em;
    display: inline-block;
}

.eimage {
    width: 300px;
    height: 200px;
    border: 1px solid black;
    display: inline-block;
    position: relative;
    margin: 1em;
}

.einfo {
    width: 28em;
    height: 200px;
    display: inline-block;
    position: relative;
    border: 1px solid black;
    margin: 1em;
}

hr {width: 20%;}