如何在没有任何空间的容器之间分隔图像答案

【问题标题】：How to spacing between images without any space with their container如何在没有任何空间的容器之间分隔图像
【发布时间】：2014-02-06 14:35:37
【问题描述】：

我正在尝试创建一个包含图像的 div，并且它们之间有空间。例如，我希望它们之间的空间是2px，我可以使用margin:1px;，这样当一个人的左边距和另一个人的右边距相距时，它就会变成2px，上下都一样。但是图片和div的边框之间也有空间，所以div会变成这样：

+------------------------------------------+
|                                          |
|  +---------------+    +---------------+  |
|  |               |    |               |  |
|  |               |    |               |  |
|  |               |    |               |  |
|  |      IMG1     |    |      IMG2     |  |
|  |               |    |               |  |
|  |               |    |               |  |
|  |               |    |               |  |
|  +---------------+    +---------------+  |
|           DIV                            |
|                                          |
|  +---------------+    +---------------+  |
|  |               |    |               |  |
|  |               |    |               |  |
|  |      IMG3     |    |      IMG4     |  |
|  |               |    |               |  |
|  |               |    |               |  |
|  |               |    |               |  |
|  +---------------+    +---------------+  |
|                                          |
+------------------------------------------+

当我真正想做的事情是这样的：

+---------------+---+---------------+
|               |   |               |
|               |   |               |
|               |   |               |
|      IMG1     |   |      IMG2     |
|               |   |               |
|               |   |               |
|               |   |               |
+---------------+   +---------------+
|        DIV                        |
|                                   |
+---------------+   +---------------+
|               |   |               |
|               |   |               |
|      IMG3     |   |      IMG4     |
|               |   |               |
|               |   |               |
|               |   |               |
+---------------+---+---------------+

如何做到这一点，没有为每张图片设置样式？

【问题讨论】：

标签： html css

【解决方案1】：

如果添加类或 ID 不是一个选项，并且您不想单独设置图像样式。然后你可以尝试使用img:nth-child(n) 或img:nth-of-type(n)。

首先为每个奇数图像分配一个右边距：

img:nth-of-type(odd){
    margin-right: 1px;
}

然后每个偶数的左边距：

img:nth-of-type(even){
    margin-left: 1px;
}

最后是除了前两个之外的每张图片的上边距：

img:nth-of-type(n+3){
    margin-top: 2px;
}

您还可以省略左边距或右边距之一并增加您留下的边距...从而稍微减小样式的大小。

这里是一个例子：jsfiddle。在此示例中，容器 div 的宽度设置为两个图像加上边距，并且图像在左侧浮动。

【讨论】：

【解决方案2】：

jsfiddle example

您可以设置底部边距并将左列图像与 CSS 中的 float 属性对齐：

img {
    margin-bottom: /*your margin*/;
    float: left;
}

然后将右列图片移动到div容器的右侧：

nth-child(even) {
    float: right;
}

【讨论】：

【解决方案3】：

给所有图像一个相同的类并为其定义填充

试试这个

<div>
  <img src="1.jpg" class="myimage"/>
  <img src="2.jpg" class="myimage"/>
  <img src="3.jpg" class="myimage"/>
  <img src="4.jpg" class="myimage"/>
</div>

CSS

.myimage {
  display:block;
  padding:2px 2px 0 0;
}

【讨论】：