在HTML/CSS文档中创建空间的最佳方法是什么？

我有一个div，其中每行有3个图像。图像大小都一样。我一直在使用小的完全透明的图像，然后我会明确给出高度和宽度，以形成图像之间的空间。例如：

 div begin
 space image width=15, height=1 actual image (no explicit dimensions)
 space image width=10, height=1 actual image (no explicit dimensions)
 space image width=10, height=1 actual image (no explicit dimensions)

 space image width=900, height=20 (this is to separate rows, which should be 900 wide, space + 3 x image)

 space image width=15, height=1 actual image (no explicit dimensions)
 space image width=10, height=1 actual image (no explicit dimensions)
 space image width=10, height=1 actual image (no explicit dimensions)
 div end

这些行可以通过代码生成，也可以不通过代码生成，有时还存在HREF。我意识到我也许可以在图像/或锚元素上使用边距/填充来创建空间。但这需要在每个图像上设置一个类。这似乎不是一个好办法。有几个原因：空间将位于锚定标记内，使其可链接。我不反对使用div，也不反对使用特定的类。然而，我已经试过了，它们似乎并不像我预期的那样有效。它们创建换行符，因此现在图像显示在一列中，并且它们似乎不会占用任何实际空间

  How about 2 divs, one for each row. Then set the margins on those.

  <div class="row"> Your images or anchor tags</div>
  <div class="row"> Your images or anchor tags</div>

或者在图像行之间需要多少空间

您可以对图像使用div，以便在屏幕上更好地定位它们。尤其是要避免在锚标记上添加边距

 div.img{
     display:inline;
 }

 .firstcol{
     margin-left:15px;
 }

 .col{
     margin-left:10px;
 }

及

第行的第一个图像
第二行的图像

---

等等。

这就是我的工作：

.row {
  margin-left:20px;
}
.space {
  margin-left:12px;
  display: inline;
}
.row-space {
  margin-bottom:20px;
}

div class=row
  a href=x img
  div class=space /div
  a href=x img
  div class=space /div
/div

div class=row-space /div

---

我需要内联显示以避免换行。过去我读过并使用过float:left，但它还有其他一些副作用，不适合这个用途。

使用间隔图像相当笨拙，几乎不需要。最简单的方法可能是使用

另外，这也会在最后一行图像下方创建一个20px的边距。如果这是一个问题，您可以通过设置
.gallery{margin bottom:-20px}
将其置为无效。在代码参考中，这些问题很难理解。请分享实际生成的HTML代码，然后发布您的期望。这似乎会部分起作用。我确实希望长方体边缘和图像之间的第一个空间是15，然后下一个空间是10。比如：| 15 IMAGE 10 IMAGE 10 IMAGE 15 |然后创建几个类。根据您需要的空间大小，将其命名为row15、row10等。然后在需要时应用它们。不是行，而是列，不是吗？该行在左侧显示为15px的空间，然后在图像1和2之间显示为10px，在图像2和3之间显示为10px。然后新的一行出现了。哦！我不明白。然后使用左边距：15px等。如果将显示设置为内联，则可以使用divs。
 <div class="img firstcol">The first image of teh row</div>
 <div class="img col">The second image of teh row</div>

.row {
  margin-left:20px;
}
.space {
  margin-left:12px;
  display: inline;
}
.row-space {
  margin-bottom:20px;
}

div class=row
  a href=x img
  div class=space /div
  a href=x img
  div class=space /div
/div

div class=row-space /div

.gallery img { border: 0; margin-bottom: 20px;  }
.gallery a:nth-child(3n+1) { margin-left: 15px; }
.gallery a:nth-child(3n+2) { margin-left: 10px; margin-right: 10px; }
.gallery a:nth-child(3n+3):after { content: "\A"; white-space: pre; }