网格元素外围没有边距

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/。