在HTML / CSS文档中创建空间的最佳方式是什么？ [英] What is the best way to create space in an HTML/CSS document?

问题描述

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

  div begin 
 space image width = 15，height = 1 actual image（no显式尺寸）
空间图像宽度= 10，高度= 1实际图像（无明确尺寸）
空间图像宽度= 10，高度= 1实际图像（无明确尺寸）
 
空间图像宽度= 900，高度= 20（这是分隔行，应该是900宽，空间+ 3 x图像）
 
空间图像宽度= 15，高度= 1实际图像显式尺寸）
空间图像宽度= 10，高度= 1实际图像（无明确尺寸）
空间图像宽度= 10，高度= 1实际图像（无明确尺寸）
 div end 
  

这些行可能会或可能不会通过代码生成，有时也会有hrefs。我意识到我可以使用图像/锚点元素上的边距/填充来创建空间。但是这需要在每个图像上设置一个类。这似乎不是一个好方法去做这件事。原因如下：空间位于锚标签内部，因此可以链接。我不会反对使用div和使用特定的类。然而，我已经尝试过了，而且他们似乎并没有像我期望的那样工作。他们创建换行符，所以现在图像出现在一列中，而且他们似乎也不会占用任何实际空间。

解决方案

使用间隔图像相当笨拙并且几乎不需要。最简单的方法可能是使用< a>< img ...>< / a>将所有图片包装在 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中的列。最后一条规则在每个第三个元素之后引起换行符有点棘手（但有效）。

yucca42 / 2MgDM /rel =nofollow> jsfiddle

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

I have a div in which there are rows of 3 images each. The images are all the same size. I had been using small completely clear transparent image which I would then explicitly give height and width to form spaces between the images. An example would be something like :

 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

These rows may or may not be generated via code and there are sometimes hrefs. I realize that I could perhaps use margins/padding on the image/or anchor element to create space. But this would require setting a class on each image. That does not seem like a good way to go about this. For a few reasons : the space would be inside the anchor tags, making it linkable. I would not be opposed to using divs and using specific classes on those. I have tried this however, and they do not seem to work as I would expect. They create line breaks, so now the images appear in a column, and they don't seem to take up any actual space anyway.

解决方案

Using spacer images is rather clumsy and hardly ever needed. The simplest approach is probably to wrap all images inside a elements, using just <a><img ...></a> for those that aren’t meant to be links. Then you can set margin on the a element, without making the margin clickable.

You can also format the image gallery in rows of three images without making such division part of the HTML code. Example:

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

This effectively makes the layout table-like, without hard-coding the division into columns in HTML. The last rule is a bit tricky (but valid) way of causing a line break after every 3rd element.

jsfiddle

P.S. This creates a 20px margin below the last row of images, too. If this is an issue, you can nullify it by setting .gallery { margin-bottom: -20px }.

这篇关于在HTML / CSS文档中创建空间的最佳方式是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！