Question

我有三个内联阻塞的div，每个div宽度为33％：

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

CSS：

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

但是一旦我向div添加填充，它会向上推动列的宽度并将它们包裹到下一行：

.third {
    padding:10px;
}

无论如何我可以阻止填充增加div的大小吗？我只想把内容推向内心。

小提示：http://jsfiddle.net/chdehewh/

谢谢！

Answer 1

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

中

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

看到它起作用： http://jsfiddle.net/chdehewh/2/

此外，我还提供了避免使用内联块元素的空间的技巧。看看

Answer 2

你需要在你的小提琴中调整一些东西才能让它发挥作用。

首先，您需要在.third-with-padding课程中设置box-sizing: border-box;。

接下来，您需要删除div之间的空格。使用display: inline-block;时，空格显示为文本。如果您不想消除空格字符（保持代码清洁），则可以使用浮点数，弹性框，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>

<强> CSS

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

向列添加填充，最多可添加100％

2 个答案: