Question

考虑我在html页面中有9个IMG。当浏览器的视口发生变化时，它们将在任意数量的行或单元格中重新排列。我想要的是，它们之间的空间是5，但不是在最后一行或列之后没有边距。

边距不合适，因为它也给出了最后一行或一列边距。

Answer 1

在CSS中使用：last-child或：first-child指令。例如：

#images
{
  padding-left: 10px;
  padding-right: 10px;
}
#images:last-child, #images:first-child
{
  padding: 0px;
}

如果您使用PHP或其他服务器端脚本语言来生成HTML输出，则最好将ID（或类）分配给那里的第一个和最后一个元素，而不是使用伪选择器。

如果你真的想要，你也可以将它们结合起来。

Answer 2

您可以编写用于显示具有所需边距的图像行的代码，然后在您不希望应用边距的图像上，链接类并提供不同的样式。您还可以使用:not伪元素。

<强> HTML

<div class="image-margin">
<img src="whatyouwant">
<img src="whatyouwant">
<img src="whatyouwant">
<img src="whatyouwant" class="image-no-margin">
</div>

<强> CSS

.image-no-margin {
margin:0px
}
.image-margin img:not(.image-no-margin) {
0px 5px 5px 0px; //5px top and 5px left
}

此代码表示您将边距0px应用于具有类图像无边距的图像以及您为其他所有图像定义的另一种样式（底部和右边5px边距）（不是图像无边距）。 / p>

只有Internet Explorer 9+，Firefox，Chrome，Safari和Opera的最新版本支持伪元素:not。您可以使用名为selectivizer的JavaScript库添加对Internet Explorer 6+的支持。

您只需下载该库并将其包含在您网页的head中：

<script type="text/javascript" src="[JS library]"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
  <script type="text/javascript" src="selectivizr.js"></script>
  <noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]-->

Answer 3

.images{
  padding: 0;
  margin: 0;
  border: 0;
}

我知道您可能使用过Firebug并发现没有边框，但我遇到了同样的问题，添加border: 0;完全消除了所有间距，而无需从代码中删除回车。

希望它有所帮助！

html中元素之间的空格

3 个答案: