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

Question

我有一个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 并在这些上使用特定的类。 但是，我已经尝试过了，它们似乎没有像我预期的那样工作。 它们创建换行符，因此现在图像显示在一列中，并且它们似乎不占用任何实际空间。

Answer 1

  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>

然后

 .row{
      margin-top:10px;
  }

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

您可以对图像使用div，以便更好地将它们放置在屏幕上。特别是希望避免向锚标记添加边距。

 div.img{
     display:inline;
 }
 .firstcol{
     margin-left:15px;
 }
 .col{
     margin-left:10px;
 }

和

 <div class="img firstcol">The first image of teh row</div>
 <div class="img col">The second image of teh row</div>

等。

Answer 2

使用间隔图像相当笨拙，几乎不需要。最简单的方法可能是将所有图像包装在a元素中，仅对那些不打算成为链接的图像使用<a><img ...></a>。然后，您可以在a元素上设置边距，而无需使边距可单击。

您还可以将图像

库格式化为每行三个图像，而无需使这种划分成为 HTML 代码的一部分。例：

.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; }

这有效地使布局表格类似，而无需在 HTML 中硬编码划分为列。最后一个规则是在每个第 3 个元素之后导致换行符的有点棘手（但有效）的方式。

斯菲德尔

附言这也会在最后一行图像下方创建一个 20px 的边距。如果这是一个问题，您可以通过设置 .gallery { margin-bottom: -20px } 来将其取消。

Answer 3

这是我的工作

：

.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，但这还有其他一些副作用，不利于此目的。