Margin on child element

2018-07-01 11:27:52

Possible Duplicate:
Margin on child element moves parent element

I have a parent div that contains a child div. Parent is the first element in the body, with no particular CSS style. When I set

.child {
   margin-top: 10px;
}

the end result is that top of child is still aligned with parent . Instead of child being shifted for 10px downwards, my parent moves 10px down.

I found that adding padding to parent can work but I've read that this is not the way to solve problem. Why? If I want margin-right I can do padding-right on parent , likewise if I want margin-top I can also do padding-top and get the correct result.

In margin on child element moves parent element someone said:

What if you want a top-margin...? Not really a solution. This isn't really a solution if a top margin is required.

What is he trying to say? Please explain.

From CSS Margin Collapsing on Mozilla Developer Network:

Parent and first/last child

If there is no border, padding, inline content, or clearance to separate the margin-top of a block with the margin-top of its first child block [...] then those margins collapse. The collapsed margin ends up outside the parent.

链接地址: http://www.djcxy.com/p/87776.html

上一篇: 顶部移动父元素

下一篇: 保留子元素