CSS 多个带边距的分组元素

Question

采取这个 HTML：

<div>
    <div class="block">Hello</div>
    <div class="block">Hello</div>
    <div class="block">Hello</div>
    <div class="block">Hello</div>
</div>

使用配套的 CSS：

div.block
{
    float: left;
    width: 100px;
    height: 100px;
    margin: 1px;
    background: red;
}

结果是四个块，它们之间有 2 像素 的空间（距左块的右边缘 1 像素，距左块的左边缘 1 像素）右块）。

有没有一种方法可以达到与边框折叠类似的效果？ IE。我希望相邻块之间只有一个像素的边距。

这是我经常遇到的更复杂情况的基本示例，我不想通过类似于仅将 margin-left 设置为 1 像素等方式来解决它。

Answer 1

有多种方法，其中

一种是

div.block
{
    float: left;
    width: 100px;
    height: 100px;
    margin: 1px 1px 1px 0;
    background: red;
}
div.block:last-child {
    margin: 1px 0 1px 0;
}

另一种，

div.block+div.block { margin-left: 1px; }

您可以查看两种方式的演示此处

Answer 2

如何使用 CSS 选择器 :first-child 和 :last -child 更改第一个和最后一个

？

div.block
{
    float: left;
    width: 100px;
    height: 100px;
    margin: 2px 1px 2px 0;
    background: red;
}
div.block:first-child {
    margin-left: 2px;
}
div.block:last-child {
    margin-right: 2px;
}

Answer 3

如果您可以更改标记本身，那么我想我们可以有一个跨浏览器兼容的解决方案：

<div class="block"> <div class="block_2"></div> </div>

然后应用 css，如下所示：

div.block{float: left; width: 100px; height: 100px; }
div.block_2{width:99px; height:100px; background-color:red}

Answer 4

为最后一个块分配一个名为“last”的类。
将每个块的 margin-right 设置为 1px。
将最后一个类的块的 margin-right 设置为 0。
.block.last { 右边距：0px; 像 forst-child 和 last-child这样

的伪选择器没有得到很好的支持，所以我认为这是最好的选择。