父容器和子容器之间的间距是否应该属于父或子?

时间:2012-03-28 23:26:34

标签: html css padding margin spacing

我很难确定我的CSS中填充/边距应该在父容器和子容器之间保持分离的位置。例如,如果你有一个带有两个嵌套子节点的父div,你需要在子节点之间有10px的间距,并且子节点与父节点间隔10 px;那么你会在父div {padding:10px}中添加填充,然后在孩子之间添加10px的边距吗?或者你会让父母置于0填充并让孩子们定义他们彼此之间以及他们的父母需要分离的内容吗?

Here's a fiddle showing both examples

4 个答案:

答案 0 :(得分:0)

CSS margin属性位于外部而padding 在DIV块内。我不确定这是不是你想要的 - 记录在这里:

When to use margin vs padding in CSS

我刚验证并且margin属性也在嵌套DIV中工作。 所以这是填充的替代方法。

但是,如果班级中的位置是绝对的,填充应该无关紧要。但 如果你使用绝对位置,所有DIV都必须拥有 绝对的位置,以避免潜在的冲突,你会有 了解客户的最小屏幕尺寸(绝对可能不是一个好主意)。

注意:如果您的任何客户仍在使用IE5,那么该浏览器 有一个填充错误,应该在IE6中修复。 http://forums.devshed.com/css-help-116/css-padding-inside-absolute-div-70789.html

答案 1 :(得分:0)

我通常在父容器上填充。然后是孩子之间的保证金。例如,如果我有一个带有10个孩子的ul,我会向ul添加10px填充,向li添加10px margin-bottom,向li添加0px margin-bottom:last-of-type ......

我不知道,它根据情况而有所不同,我猜你对它的解释。在我的例子中,因为我相信ul和li之间的空间属于ul,所以我将它作为ul的填充。 li之间的空间属于他们,所以我把它作为他们的边缘。

没什么帮助,是吧?

答案 2 :(得分:0)

对我而言,完全依赖于所讨论节点的语义 - 是什么? 是什么?

父母是否“想要”其中的空间以使其内容远离其边界(填充)?或者孩子们“想要”他们与父母之间的距离(边缘)?

这些问题的答案基于每个节点所服务的目的(我很重视语义标记并避免表示标记)

在你的情况下,在不知道进一步意义的情况下,听起来孩子们想要从所有事物中获得10px,所以我会在各方面给他们margin: 10px;。两个孩子之间的边缘崩溃只会留下10px的差距,并且距离他们周围的其他一切距离都是10px。

答案 3 :(得分:0)

大家好,我不是HTML专家,我是学习者,所以我从网络行业学到了什么,所以我代表分享。

根据我的说法,Padding是元素的内部空间,margin是元素的外部空间。

填充: - 如果您将在父容器中使用填充,则必须调整父容器的宽度和高度,否则父将在其宽度和宽度中添加填充。高度。

边距: - 如果您在子容器中使用边距,则不需要触及父容器宽度&高度,因为子容器将从所需区域开始。

或者看到你更新的小提琴示例我在儿童容器中使用了边距,因为当我在父容器中使用填充时我调整了宽度&高度,但当我使用边距时,不需要调整父容器,请参阅演示: - http://jsfiddle.net/WSTv6/1/

& can read more about margin & padding