0

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.

Community
  • 1
  • 1
  • 4
    Are you referring to this comment? http://stackoverflow.com/questions/1762539/margin-on-child-element-moves-parent-element#comment7469551_1762575 If you are, then it's not appropriate to copy the original question and paste it like that, **without even so much as a link to the original question**. – BoltClock Jan 01 '13 at 12:34
  • 1
    Instead of asking a whole new question just to discuss one comment on an answer in another question, I suggest you make your comment on *that answer/question*, then add a bounty to the question to drive attention to it. If you don't have the reputation to create a bounty then some small amount of work adding value to the community is in order and frankly will not take a lot of time if you have any value to add. – ErikE Jan 01 '13 at 19:59
  • @ErikE: Well he doesn't have the reputation to add comments either. – BoltClock Jan 01 '13 at 20:39
  • @BoltClock I suppose that's a good point, though I don't see that really changes the equation much. If not being able to make comments diverts those comments to questions that are predestined to be closed, then the person is being unwillingly corralled in a way unhealthy to the site. Anyway... I think the effort should be expended to earn the rep to make those comments (and offer that bounty). :) – ErikE Jan 01 '13 at 20:43
  • @ErikE: Indeed. It's not a very valid reason to open a completely new question, but I can see why he would have done it anyway. – BoltClock Jan 01 '13 at 20:51

1 Answers1

1

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.

Community
  • 1
  • 1
Alexander Christiansson
  • 555
  • 3
  • 7