Html DIV填充干扰宽度

我有一个100%宽度和一些填充的div。 div比它的包装器大。 很明显，我不希望这种情况发生。 我无法处理宽度上的像素，因为宽度是动态的

我尝试了各种CSS技巧，并通过stackoverflow进行了搜索。我无法想象为什么还没有人问这个可能很简单的问题，但我真的没有发现任何有效的方法。也就是说，如果这仍然是一个重复的问题，请原谅

.entryrow{
位置：相对位置；
宽度：100%；
高度：100px；
背景：线性梯度（#2c647b，#191654）；
框大小：边框框；
显示：内联块；
填充物：5px；
保证金：5px 5px 0 5px；
边框：1px实心#ccc；
光标：指针；
}

布卢布

在

.entryrow

上尝试css的

calc（）

功能

.entryrow{
位置：相对位置；
宽度：计算（100%-10px）；/*10px用于下面应用的余量*/
高度：100px；
背景：线性梯度（#2c647b，#191654）；
框大小：边框框；
显示：内联块；
填充物：5px；
保证金：5px 5px 0 5px；
边框：1px实心#ccc；
光标：指针；
}

布卢布

使用

计算（100%-10px）（=100%减去2 x 5px边距）（边框不计算，因为您使用了
框大小：边框框
）


.entryrow{
位置：相对位置；
宽度：计算（100%-10px）；
高度：100px；
背景：线性梯度（#2c647b，#191654）；
框大小：边框框；
显示：内联块；
填充物：5px；
保证金：5px 5px 0 5px；
边框：1px实心#ccc；
光标：指针；
}

布卢布
只需将元素保留为块元素，您就不需要
宽度：100%
或
框大小：边框框
（顺便说一句，最好保留它，以避免将来出现与填充/边框与宽度组合相关的任何问题）


.entryrow{
位置：相对位置；
高度：100px；
背景：线性梯度（#2c647b，#191654）；
填充物：5px；
保证金：5px；
边框：1px实心#ccc；
光标：指针；
}

布卢布
如果您给出
最大宽度：100px到您的包装div和
最大宽度：90px到你的
.entyrow
它工作得很好。显然，你只需对divs
width:100%但如果两者都是100%，则您没有空间填充。这取决于你在最大宽度中放置的px。希望能有所帮助。
有时候，代码越少越好；）

编辑：为了证明使用此解决方案创建多行将导致OP的预期结果，大多数其他答案仍然存在对齐问题

例如，接受的答案（）如果您添加多行，它将切断行的顶部和底部


.wrapper{
背景：黑色；
填充：1%
}
entryrow先生{
高度：100px；
背景：线性梯度（#2c647b，#191654）；
边框：1px实心#ccc；
填充：1%；
利润底部：1%；
}

Blubb1
Blubb1
Hi Chris，使用框大小：边框框@FatihErol-他已经在使用它了，请看代码。@Chris S。我建议将填充移动到父级，而不是子级上的边距。“div比包装器大。”-不，不是。当然，由于你增加的利润，它必须在母公司内部移动。CBroe是对的。您的div不大于其包装，问题是由其边距引起的。您应该删除其边距并将这些值添加到其父级的填充中。谢谢，但请您解释一下为什么将填充更改为百分比？
我无法处理宽度上的像素，因为宽度是动态的。
因此我想使其尽可能动态。如果您将它们改回像素，它应该可以工作。接受的解决方案包括问题和特定问题；）这不是关于对齐或添加更多行，而是关于宽度和边距/填充问题。如果我们想要更多的行，我们只需删除固定的高度。无需对其他答案添加注释；）简单描述你的答案是什么我解释了我的解决方案，并举例说明了为什么另一个答案不起作用。您是出于个人考虑，虽然我可以给出任何其他答案的示例，但我只是为将访问此页面的其他访问者提供了一个解决方案。@Temaniaff如果您现在编辑了您的答案并删除了固定高度，那么结果将与我的答案相同。谢谢，有很多有用的回答，我对calc函数有了新的了解，但这个解决方案似乎更干净，所以我认为这一个是最有用的。我不太清楚为什么有人想要帮助获得即时负声誉。谢谢你试着帮助我。然而，我发现@TemaniAfif的回答是最有帮助的。