html - 行内元素不接受 margin-top

Question

我正在尝试为内联元素提供 magins(照片库的图像缩略图)。但是我的元素似乎忽略了 margin-top 。
标记是

<div id="row1-left">

            <div id="gallerypreview">
                <img id="#previewImg" alt="preview for image" src="gallery/autumn1.jpg">
            </div>
            <div id="gallerythumbs">
                <div id="gallerythumbsInner">
                    <div class="gallerythumb">
                    <img src="gallery/autumn1.jpg">
                    </div>
                    <div class="gallerythumb">
                    <img src="gallery/autumn2.jpg">
                    </div>
                    <div class="gallerythumb">
                    <img src="gallery/autumn3.jpg">
                </div>
                </div>
            </div>

        </div>

风格是:

#row1-left{
width: 460px;
height: 310px;
float: right;
margin: 15px 15px 0px;
}

#imggallery{
    width:450px;
    height:300px;
    margin:5px;

}
#gallerypreview{
    width:450px;
    height:200px;
    margin:2px 5px;
    border-radius:20px;
    background-color:#E7E7E7;


}
div#gallerypreview>img{
    margin:1px 25px;
    width:400px;
    height:198px;
}
div#gallerythumbs{
    margin:5px 5px;
    width:450px;
    height:90px;
    background-color:#E7E7E7;
    border-radius:5px;

}
#gallerythumbs .gallerythumb{
    display:inline;
    width:140px;
    height:86px;
    margin:5px 5px;
}
div.gallerythumb>img{
    width:138px;
    height:76px;
}

根据 SO 上的一些旧帖子，margin-top 不适用于内联非替换元素。我的问题是是否有任何 hack 来完成此操作，例如，我的内联图像缩略图与其顶部父元素有空间？

Answer 1

内联元素和边距因其异常活跃而成为热门话题。有些人使用填充来克服这个问题。

.....

另一种方法是使用 display:table;而不是显示:内联；

最好的办法是......

像这样使用css样式

div{
position:relative;
top:-2px;
}

这会使 div 降低 2 个像素。