CSS&；HTML页边距

我想移动这两个箭头图像，使它们彼此靠近，现在我把它们分开了。以下是我需要的：

以下是我的工作进展：

HTML:

<div id="arrow">
    <img src="http://gyazo.com/736c6c5e6e5e3355b804ccda9143560c.png" alt="Arrow1"></img>
    <img src="http://gyazo.com/736c6c5e6e5e3355b804ccda9143560c.png" alt="Arrow1"></img>
</div>

谢谢

---

PS：忽略左侧或右侧位置

您可以将边距设置为负数（如

-10px

），箭头将彼此靠近。

使用css非第一个子选择器

工作示例

这是css

#arrow img {
    margin:2px;
}

#arrow img:not(:first-child) {
    position: relative; right: 22px;
}

---

我在css中使用相同的类这样做：

#arrow img {
margin:2px;
padding:0px;
margin-right:-20px;
}

---

工作小提琴：

您可以使用同级选择器：

#arrow img {
    margin: 2px;
}

#arrow img+img {
    margin-left: -25px;
}

工作示例：

技术信息：

---

在css中，

+

是一个同级组合选择器，它允许您选择直接位于另一个特定元素之后的元素。在本例中，它是一个紧挨着另一个图像的图像，但您可以使用任何元素。例如，您可能希望将样式应用于div旁边的任何段落，您将使用

div+p

，并且它将匹配div旁边的任何段落，在另一侧，如果您希望在另一个元素之前匹配一个元素，在上面的示例中，您应该使用

-

同级组合符，它将匹配

div

，而不是

p

，如果您为两张图片提供单独的ID，您可以分别移动它们。像这样：

HTML:

---

关于负边距的一些注意事项：箭头不会靠得更近，因为边距将应用于所有图像！当箭头应用于“两个”图像时，箭头将更加靠近。使用右边距。@griflab在这种情况下，您可以给他们单独的ID，或者使用CSS3伪代码中的一个-classes@DavidBlayney或者使用我和Juan Antonio Orozco提供的正确css语法

#arrow img{float:left；}

。这是所有你可以使用css的兄弟姐妹或不是孩子selector@JuanAntonio Orozco谢谢，但是它有什么优点和更好的表现方式呢？优点是你不需要在每个图像上都加id，它可以像你在arrow div中放的mani图像一样工作，假设你现在想放3个箭头，如果你用id做的话，您需要向图像中添加一个id，并为该箭头生成新的css代码，如果您使用的不是第一个子或同级选择器，您只需要将图像添加到div中，并且为了表示它，它不获取它，您是指代码吗？

#arrow img {
    margin: 2px;
}

#arrow img+img {
    margin-left: -25px;
}

<img id="arrow1" src=""></img>
<img id="arrow2" src=""></img>

#arrow2 {margin-left: -20px;}
#arrow1{margin-left: 0px;}