html - 从一行中的第一个和最后一个元素中删除填充

Question

假设有一个固定宽度的网站。我需要在其中放置 3 个盒子，盒子之间有一些空间(填充)。但是我不需要左右两边的padding。

我怎样才能摆脱它？当我将 padding-left 或 padding-right 设置为相应的框时，这些框不再具有相同的大小(宽度/高度)。

这是我的代码:

.wrap {
	margin: 0 auto;
	width: 1024px;
	height: 800px;
	background-color: yellow;
}

.box {
	box-sizing: border-box;
	width:33.3%;
	height: 200px;
	float: left;
	padding: 10px;
}

.box-inner {
	background-color: grey;
	width: 100%;
	height: 100%;
}

<div class="wrap clearfix">
	<div class="box"><div class="box-inner"></div></div>
	<div class="box"><div class="box-inner"></div></div>
	<div class="box"><div class="box-inner"></div></div>
	<div class="box"><div class="box-inner"></div></div>
	<div class="box"><div class="box-inner"></div></div>
	<div class="box"><div class="box-inner"></div></div>
</div>

Answer 1

虽然所有其他答案似乎都是正确的，但我会使用 flexbox 来做，因为它可以让您在布局上更加灵活。 Flexbox 有一个名为 justify-content 的特殊属性，您要分配给它的值是 space-between。

.wrap {  
      display:flex;
      flex-wrap:wrap;
      justify-content:space-between;
      align-content:flex-start;
      margin: 0 auto;
      width: 1024px;
      height: 800px;
      background-color: yellow;
    }

.box {
    box-sizing: border-box;
    width:calc(33.3% - 5px);
    margin-bottom:5px;
    height: 200px;
}

.box-inner {
    background-color: grey;
    width: 100%;
    height: 100%;
}

JSFiddle