html - 外部没有边距的元素网格

Question

看似简单的事情，但我似乎无法找到合适的搜索关键字来帮助我。我有一半希望这是重复的。

如何制作内部有边距但外部没有边距的 html 元素网格，就像这样(蓝色是带有内容的普通元素，黑色是边距):

取而代之的是:

我发现了一种使用

:nth-child(4n-3){margin-left:0}
:nth-child(4n){margin-right:0}

但必须有更好的方法来做到这一点。我认为 display:table-cell 可能对我有帮助，但似乎没有帮助。这不适用于表格数据。

这是我最初的粗略源代码，但我对使用任何结构持开放态度:

<style>
.foo
{
    float: left;
    clear: left;
    background-color: #b4c6e7;
    margin: 10px;
}
.foo+.foo
{
    clear: none;
}
.bar
{
    background-color: black;
}
</style>
<div class="bar">
    <div class="foo">content</div><div class="foo">content</div><div class="foo">content</div><div class="foo">content</div>
    <br/>
    <div class="foo">content</div><div class="foo">content</div><div class="foo">content</div><div class="foo">content</div>
    <br/>
    <div class="foo">content</div><div class="foo">content</div><div class="foo">content</div><div class="foo">content</div>
    <div style="clear:both" />
</div>

Answer 1

您可以使用 first-child 和 last-child 来覆盖边框，就像下面非常快速的代码一样。

我使用了一个表格，因为您说这些数据应该显示在网格中。相同的效果可用于类似的效果，但表格开始时呈网格状，因此易于演示。

添加了背景颜色，因此您可以轻松查看哪些样式应用于哪些单元格。

.datagrid {
    border-spacing:0px;
    border:0px;
    margin:0px;
    padding:0px;
    background-color:purple;
}

.datagrid td{
    border:1px solid black;
    background-color:blue;
    margin:0px;
    padding:10px;
}

.datagrid tr td:first-child {
    background-color:red;
    border-left:0px;
}

.datagrid tr td:last-child {
    background-color:green;
    border-right:0px;
}

.datagrid tr:first-child td {
    border-top:0px;
    background-color:yellow;
}

.datagrid tr:last-child td {
    border-bottom:0px;
    background-color:yellow;
}

<table class="datagrid" >
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

参见 https://jsfiddle.net/jec2gcg2/对于工作示例。