css - 内联块 div 未正确应用填充

Question

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

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

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

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

想法受到赞赏。

谢谢你，韦斯利

score 2 · Accepted Answer

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

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

小演示：小链接。

score 0 · Accepted Answer

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

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

<!-- … -->

score 0 · Accepted Answer

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

width: 100%;

到

width: 600px;

或将填充更改为百分比，例如：

width: 80%;
padding: 10%;

score 0 · Accepted Answer

不要将填充应用到 div，而是专门针对文本。将文本放在“p”标签中并在 CSS 中调用它。

.portfolio_item p{
     padding: 100px;
}

score 0 · Accepted Answer

你可以这样给，

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

5 回答 5