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像素的空间（距离左边块的右边距1px，右边块的左边缘1px）。

有没有办法可以达到类似边界崩溃的效果？即。我希望相邻块之间只有一个边距像素。

这是我遇到的更为复杂的情况的基本示例，我不想通过类似于仅将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; }

您可以检查demo

双向的here

Answer 2

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

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'的块分配一个类。每个块的设置边距为1px。将最后一个类的块的margin-right设置为0。 .block.last {margin-right：0px; }

像forst-child和last-child这样的伪选择者没有得到很好的支持，所以我认为这是你最好的选择。

CSS具有边距的多个分组元素

4 个答案: