内联块div没有正确应用填充

Question

你可以在这里看到一个例子：

http://users.telenet.be/prullen/portfolio_test.html

我为portfolio_item类设置了100px（所有方向）的填充（该页面上有3个项目）。应用顶部，底部和左侧填充。但是正确的填充似乎不起作用;文本超出了div的边界。

.portfolio_item {
    width: 100%;
    clear: both;
    display: inline-block;
    padding: 100px;
}

我已经尝试将div更改为float：left而不是display：inline-block但是没有帮助。

我们很感激。

谢谢你， 韦斯利

Answer 1

在box-sizing: border-box;上应用.portfolio_item可以解决问题。您必须包含一些特定的供应商前缀才能在所有现代浏览器上使用：

.portfolio_item {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

小演示：little link。

Answer 2

多个父元素（.out和.in）已应用overflow: hidden;。整个容器设置为800像素的宽度，因此内容的右侧被隐藏。填充本身有效 - 您只是在当前设置中看不到它。

<div style="width:800px; border:2px dashed red;">
    <div class="out">
        <div class="in">

<!-- … -->

Answer 3

您可以将内部宽度设置为100％，但使用填充时，宽度实际上是100％+ 200px。我建议改变

width: 100%;

要

width: 600px;

或者将填充更改为百分比：

width: 80%;
padding: 10%;

Answer 4

不是将填充应用于div，而是专门定位文本。将文本放在“p”标记中并在CSS中调用它。

.portfolio_item p{
     padding: 100px;
}

Answer 5

你可以这样给，

 .portfolio_item {
        clear: both;
        display: inline-block;
        padding: 100px;
        width: 87%;
    }