删除网格系统左侧和右侧的填充

Question

我有一个网格系统，在列之间填充10px。但我不想在整个网格的左侧和右侧填充。我试图把列放在一个大的包装中，并添加margin-left：-10px和margin-right：-10px，但它只是将网格向左移动。

<div class="column column-1"><div class="inner"></div></div> 
<div class="column column-2"><div class="inner"></div></div> 
<div class="column column-3"><div class="inner"></div></div> 
<div class="column column-1"><div class="inner"></div></div> 
<div class="column column-1"><div class="inner"></div></div> 
<div class="column column-1"><div class="inner"></div></div> 

CSS：

.row, 
.column { 
    box-sizing: border-box; 
} 
.column { 
    position: relative; 
    float: left; 
    display: inline-block; 
} 
.column-1 { 
    width: 33.3333333%; 
} 
.column-2 { 
    width: 66.6666666%; 
} 
.column-3 { 
    width: 100%; 
} 
.column { 
    min-height: 60px; 
    padding: 10px; 
} 
.inner { 
    height: 100px; 
    width: 100%; 
    background: black; 
    display:block; 
    position: relative; 
} 

JS Fiddle

Answer 1

我注意到你有你的CSS定义的.row类，但不使用它。 如果您开始使用它并将您的列嵌入到一行中，则可以使用:first-child和:last-child选择器来更改结束列的边距。

像这样

.row .column:first-child { 
    padding-left: 0; 
} 

.row .column:last-child { 
    padding-right: 0; 
} 

<div class="row"> 
    <div class="column column-1"><div class="inner"></div></div> 
    <div class="column column-2"><div class="inner"></div></div> 
</div> 

Fiddle