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

【问题标题】：Margins/space between images won't work图像之间的边距/空间不起作用
【发布时间】：2014-02-02 00:41:42
【问题描述】：

所以我决定在我的艺术页面上的画廊中添加一个新部分。我想我可以从原件中复制 CSS 并制作第二个“信息框”和“画廊”，但第二组似乎不承认“边距”代码，相反，图像略有重叠或出现在每个旁边其他。

在此页面上：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>

【问题讨论】：

Jsfiddle 比链接到网站更好。
<div id="infobox 2">, <div id="gallery 2"> – 这些不是有效的 id。
什么是更好的 ID？我想在同一页面上创建一个单独的画廊/部分，但我的第一次尝试导致“委托作品”图像由于某种原因向右偏移。

标签： html css image margins

【解决方案1】：

我不太确定这将如何影响您网站的其他部分，但在某处有一个样式定义 div > a > img 有一个 margin-left -10px。这会导致问题。

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

Firefox > Web 开发人员 > 检查员

然后单击页面上的任何元素，它会显示 CSS 以及是什么原因造成的。

【讨论】：

出于某种原因，尝试删除负边距会导致记事本和 Compozer 无法保存文件。遗憾的是，除了发现其中的 19 个错误之外，我真的不明白 Web 开发人员告诉我的任何内容。

【解决方案2】：

重叠是由以下css引起的：

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

放弃负边距，它会起作用。如果您尝试定位图像，如果您制作包含锚点display: block 并浮动它们，或者使用有一些陷阱的display: inline-block，您会更幸运。

【讨论】：