HTML显示：内联块样式在CSS样式表中的行为有所不同

Question

我在HTML5网页上注意到，当我将这些内联样式转移到单独的CSS样式表时，我的某些img元素上的display：inline-block样式表现出不同的行为。

仅当我为图像指定内联样式=“ display：inline-block”时，我的HTML页面才会以我希望的方式显示。如果将display：inline-block移出html并移至定义了“ previewImg”类的样式表中，则图像之间的间距会发生变化。

以下是在单独的样式表中定义的CSS类：

.previewImg{
    width:80px;
    display:inline-block;
    vertical-align: middle;
    margin:5px; 
    border:1px white solid;
}

以下是最初的HTML，其行为方式与我希望它的行为方式相同（以内联样式显示：inline-block）：

<div id="previewBanner">
    <img class="previewImg" src="images/gal/002_2004/0001.jpg" style="display:inline-block;"/>
    <img class="previewImg" src="images/gal/002_2004/0002.jpg" style="display:inline-block;"/>
    <img class="previewImg" src="images/gal/002_2004/0003.jpg" style="display:inline-block;"/>
    <img class="previewImg" src="images/gal/002_2004/0004.jpg" style="display:inline-block;"/>
    <img class="previewImg" src="images/gal/002_2004/0005.jpg" style="display:inline-block;"/>
</div>

当我从img元素中删除style =“ display：inline-block”时，由于它包含在样式表中，因此我希望它的行为与以前完全相同。但是，当我这样做时，图像似乎将换行。我希望图像保持并排。

看来，previewImg类的所有其他样式都受到尊重。有什么想法为什么这种样式的内联行为与单独的CSS样式表中的行为有所不同？