Question

所以我决定在我的艺术页面上的一个画廊添加一个新的部分。我想我可以从原版中复制CSS并制作第二个＆＃34;信息框＆＃34;和＆＃34;画廊＆＃34;但第二套似乎并没有承认＆＃34;边际＆＃34;代码，相反，图像略有重叠或显示为彼此相邻。

在此页面上：http://koneko-ealain.com/art.html底部的两张图片没有边距或顶部的边距，但它们仍然略有分离。在http://koneko-ealain.com/misc.html上，底部两个稍微重叠，也忽略了边距和填充的代码。我已经复制了我认为与我的问题相关的内容，因为侧边栏没有给我任何页面带来任何麻烦。

/*Infobox*/
#infobox{
width: 900px;
height: 500px;
clear: left;
background-color: none;
padding: 30px;
margin-left: 400px;
position: relative;
}
div > img{
width: 500px;
border-radius: 10px;
}
#infobox > p{
color: #000;
font-family: "Book Antiqua", Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
font-size: 14px;
font-color: #ffffff;
letter-spacing: 0px; }
#copy{
opacity: .25;
font-size: 11px;
margin-left: 5px;
}
/*buttons*/
span > a > img{
height: 50px;
opacity: .25;
margin-left: 8px;
}
/*lightbox*/ div #gallery > a > img{
border-radius: 2px;
margin:5px;
} #infobox 2 > p{
color: #000;
font-family: "Book Antiqua", Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
font-size: 14px;
font-color: #ffffff;
letter-spacing: 0px; }
}
/*lightbox*/ div #gallery 2> a > img{
border-radius: 2px;
margin: 5px;
} </style>

Answer 1

我不太确定这会对您网站的其余部分产生什么影响，但某个地方有一个样式定义div > a > img，其margin-left -10px。这会导致问题。

要调试CSS问题，您可以在Firefox中使用以下内容：

Firefox＆gt; Web开发人员＆gt;检查员

然后点击页面上的任何元素，它会显示CSS以及导致什么的原因。

Answer 2

重叠是由以下css引起的：

div > a > img {
    margin-left: -10px;
    width: 200px;
}

放弃负利润并且它会起作用。如果您正在尝试定位图像，那么如果您创建包含锚点display: block并浮动它们，或者使用具有一些陷阱的display: inline-block，您将获得更多运气。

图像之间的边距/间距不起作用

2 个答案: