我正在尝试创建一个带有图像的div，它们之间有空间。例如，我希望它们之间的空间为2px，我可以使用 margin:1px;，因此当一个人的左边汇总符合他人的右汇率时，它将变成2px，而对于顶部和底部相同。但是图像和Div的边界之间也有空间，因此DIV将成为这样：
+------------------------------------------+
| |
| +---------------+ +---------------+ |
| | | | | |
| | | | | |
| | | | | |
| | IMG1 | | IMG2 | |
| | | | | |
| | | | | |
| | | | | |
| +---------------+ +---------------+ |
| DIV |
| |
| +---------------+ +---------------+ |
| | | | | |
| | | | | |
| | IMG3 | | IMG4 | |
| | | | | |
| | | | | |
| | | | | |
| +---------------+ +---------------+ |
| |
+------------------------------------------+
当我实际想做的是：
+---------------+---+---------------+
| | | |
| | | |
| | | |
| IMG1 | | IMG2 |
| | | |
| | | |
| | | |
+---------------+ +---------------+
| DIV |
| |
+---------------+ +---------------+
| | | |
| | | |
| IMG3 | | IMG4 |
| | | |
| | | |
| | | |
+---------------+---+---------------+
如何执行此操作，没有每个图像的设置样式？
如果添加类或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 。在此示例中
jsfiddle示例
您可以设置底部边距，并将左列图像与CSS中的float属性对齐：
img {
margin-bottom: /*your margin*/;
float: left;
}
，然后将右列图像移动到Div容器的右侧：
nth-child(even) {
float: right;
}
给出所有图像一个相同的类＆amp;定义填充
尝试这个
<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;
}