Question

我有一个常见的设置，一个带有填充内容的div，里面有一个padding-right属性来分隔它们。当项目靠近右边缘时，来自父div的padding-right和整体填充（将为padding-left）都会被应用。我怎样才能克服这个问题？

#container {
    padding: 20px;
}

#container div {
    margin: 0 5px 5px 0;
    width: 100px;
    display: inline-block;
}

<div id="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

Answer 1

作为您的方案的快速解决方法，我将添加：

#container:last-child {
    margin : 0;
}

Answer 2

您不必添加保证金权利。默认情况下，因为没有浮动

#container div {
    margin: 0 0 5px 0;
    width: 100px;
    display: inline-block; border:green solid 1px
}

<强> DEMO

Answer 3

#container div {
    margin: 0 0px 5px 5px;
    width: 100px;
    display: inline-block;
}

#container div:first-child {
    margin-left: 0;
}

：IE8支持first-child。最后一个孩子不是。所以我把边距改为左边

Answer 4

至于浏览器支持，

#container > div:last-of-type {
    margin-right: 0;
}

似乎有效。

如何处理容器内的边距与左边填充

4 个答案: