Html 将填充添加到列中，最多可添加100%

我有三个分区，每个分区的宽度为33%：

<div>
    <div class="third">hello</div>
    <div class="third">hello</div>
    <div class="third">hello</div>
</div>

但一旦我给div添加了填充，它就会将列的宽度向上推，并将它们换行到下一行：

.third {
    padding:10px;
}

我是否可以阻止填充增加div的大小？我只想把内容向内推

用小提琴演示：

---

谢谢

框大小定义为边框框使填充和边框包含在总宽度中

.third {
    width: 33%;
   display:inline-block;
   background-color:yellow;
   box-sizing: border-box;
}

看到它工作了吗

---

此外，我还介绍了一个技巧，以避免使用内联块元素的空格。看一看

你需要在你的小提琴上调整一些东西才能让它工作

首先，您需要设置

。第三个是填充
类

接下来，需要删除div之间的空格。使用
display:inline块时，空格显示为文本形式。如果不想消除空格字符（保持代码更干净），可以使用浮点、flexbox、
display:table
，或大量其他解决方案

HTML

<div>
    <div class="third-with-padding">
        hello
    </div><div class="third-with-padding">
        hello
    </div><div class="third-with-padding">
        hello
    </div>
</div>

*{box size:border box}
正如您所知，您可以使用
宽度：calc（100%/3）获得完美的三分之一@David这与IE 8不兼容。IE 9有部分支持…这是个笑话。约定得好；）
-moz box size:border box
也可以，除非你想在firefox中遇到麻烦。@David你活几年？我在2015年使用firefox v40和autoupdater…有些人不使用最新版本的浏览器。有些人仍在使用IE 6和safari 5.1。你必须为每个人编码，而不仅仅是最新版本的人。所以你必须建议不要使用显示内联块，IE 6不支持它！！！所以IE6就死了，这个浏览器上的用户配额是0.001%。Firefox自动更新自身。别担心，这就是为什么你要同时编程。您将使用宽度：33%；宽度：计算值（100%/3）；最大覆盖范围。有人告诉我，只要你能，你就可以支持所有人，事实上，FF 28和更早版本的浏览器使用率更像是0.05%。冷静完整总比不完整好。
<div>
    <div class="third-with-padding">
        hello
    </div><div class="third-with-padding">
        hello
    </div><div class="third-with-padding">
        hello
    </div>
</div>

.third-with-padding {
    box-sizing: border-box;
    width: 33%;
    display:inline-block;
    background-color:yellow;
    padding:10px;
}