inline-block div未正确应用填充 [英] inline-block div not applying padding correctly

问题描述

您可以在此处查看示例：

You can see an example here:

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

我设置了一个100px（所有方向）的填充到portfolio_item类（该页上的3个项目）。应用顶部，底部和左侧padding。但是正确的填充似乎不工作;文本延伸到div的边界之外。

I have set a padding of 100px (all directions) to the portfolio_item class (3 items on that page). The top, bottom, and left paddings are applied. But the right padding doesn't seem to work; the text extends beyond the boundary of the div.

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

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

I have tried changing the div to a float:left instead of display:inline-block but that didn't help.

建议您参考。

谢谢您，
Wesley

Thank you, Wesley

推荐答案

code> box-sizing：border-box; 在您的 .portfolio_item 应该解决这个问题。您必须包含一些特定的供应商字首，才能在所有现代浏览器上使用：

Applying box-sizing: border-box; on your .portfolio_item should fix the issue. You'll have to include some specific vendor prefixes for this to work on all modern browsers:

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

小演示：小连结。

这篇关于inline-block div未正确应用填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！