html 像素跟百分比,html – 将百分比宽度与边距(以像素为单位)组合起来

我有一个包含多个项目的页面,其宽度为33.33％,以填充页面的整个宽度.但是,我想在项目之间添加20px的边距(垂直和水平,但垂直是这里的问题),但只是在连续的每个第1和第2项的右边添加20px边距,销毁整个页面. (从小提琴中删除已注释掉的CSS,看看我的意思).

现在,问题是：如何添加20px的保证金并确保所有.item div保持相同的大小？我可以使用宽度的百分比并添加.item的移除宽度作为边距,但这绝不会是稳定的20px,因为它是百分比.

HTML

1

2

3

4

5

6

7

8

9

10

11

12

CSS

#main .item {

height: 100px;

width:33.33%;

float:left;

text-align: center;

}

#main .item:nth-child(3n+1) {

background: red;

}

#main .item:nth-child(3n+3) {

background: yellow;

}

#main .item:nth-child(3n+2) {

background:lightblue;

}

/*.item:nth-child(3n+1), .item:nth-child(3n+2) {

margin-right: 20px !important;

}*/