Html 在div中填充

我简直搞不懂：我有一个div，它以屏幕为中心，宽度为60%。在这个div里面，我还有3个div，它们以33%的宽度向左浮动，并且有一个灰色的背景色。div中填充了文本和每个div一个图像。每个div现在应该在“maindiv”中占据1/3的空间。这很好，但只要我给我的3个“contentdiv”加上一个填充符，使文本稍微分开，第三个div就会在其他div下面移动。我还想在我的3个分区周围留一个空白，这样所有分区之间都会有一个空白。但这只有在我给div一个31%的宽度时才有效。但当我缩小浏览器时，第三个浏览器会再次出现在其他浏览器的下方

现在的样子：

宽度为33.33%时的外观

---

如何解决这个问题？我的意思是，通过以%为单位设置大小，将div设置为相对宽度。因此，只要我缩小浏览器窗口，div就应该缩小。我试着让其他演员把所有的演员都围起来，把边距和填充物弄得乱七八糟，但就是不行。

很可能是盒子模特的错。填充、边距和边框可以以不同的方式添加在一起。添加到容器及其元素。最肯定的是，这将实现您的目标，并且

width:33.3333%

将按预期工作

添加边距仍然会破坏项目？还有一件很棒的事叫做。假设您的

边距
为
8px
，这只是多了几个像素。使用
calc（）
，您可以像这样减去额外的边距：

.item{ width:calc(33.3333vw - 8px); }

请注意，负号周围必须有空格。试试看，把你的利润包括在内。
你最好的办法是让三列和利润率等于100%。如果您知道只有三列，那么这相当容易：

.item {
    width:32%;
    margin-left:2%;
}
.item:first-child {
    margin-left:0;
}

只要只有三个，当您覆盖第一个
.item
时，它的总和总是100%。如果不重写第一项，则列前会有一个空格，最后一列将不适合。混合像素和百分比将在网格中给您带来问题（除非它们是填充并且您正在使用
框大小调整
）。边距不包括在框尺寸中，因为它不是主框模型的一部分
 将
框大小：边框框
应用于所有相关元素（或整个文档，就像引导一样）

然后，外部间距使用填充，而不是边距。这样就完全不需要做心算了


div{
框大小：边框框；
}
.三分之一，.内部，.全宽{
填充：8px；
}
.三分之一{
浮动：左；
宽度：33.333%；
}
.内部{
背景颜色：粉红色；
}

全宽div
内容
内容
内容
这确实解决了填充问题。我现在可以为所有3个div添加填充。但这并不能解决保证金问题。一旦我在div中添加了一个边距，最后一个边距将再次出现在其他边距的下方。
框大小调整
不适用于边距。使用
calc
进行此操作似乎是极端的。谢谢，这非常有效！在这里学到了很多有用的东西：）@isherwood
box size:border box
无法处理边距。这里的缺点是，如果一个人想要更改边距厚度，他还必须更改项目宽度。也许是一个小小的不便，但另一件事需要记住或重新发现。