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不适用于内联的非替换元素。我的问题是，是否有任何黑客可以完成这项工作，例如，我的内嵌图像缩略图是否是来自其顶级父元素的空间？

Answer 1

由于其不寻常的活动，内联元素和边距是一个热门话题。有些人使用填充来克服这个问题。

.....

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

最好的方法是......

使用像这样的CSS样式

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

这会使div降低2个像素。

Answer 2

显示：内联; 不要尊重顶部和底部边距 ......

内联元素不接受margin-top

2 个答案: