Div Element Moved

[homer.j.simpson]

Why is div element moved when I change margin-top? I have this div element that has some texts in it. I wanted to change the top margin so that those texts are shown at the desire position. The problem is that the whole div element move when I set it. Is there any way to adjust the margin without moving the whole element?

[Synook]

Maybe you want to change the padding?

[Err]

Try padding-top: 10px or line-height: 10px. Change around the values to whatever works for you.

[homer.j.simpson]

Padding does work. I'm just curious why margin setting doesn't act like it supposed to be. I mean it suppose to adjust the distance from the one edge of parent element to child one; not the distance between same level elements. Now, it's like a padding and move the parent element to set distance.

[ShadowMage]

Padding does work. I'm just curious why margin setting doesn't act like it supposed to be. I mean it suppose to adjust the distance from the one edge of parent element to child one; not the distance between same level elements. Now, it's like a padding and move the parent element to set distance.

Actually, it is supposed to move the same level elements. Padding is what is used to move child elements and text. Here's a link that explains the box model that CSS uses to lay out a page:http://w3schools.com/css/css_boxmodel.asp

[Ingolme]

Margin is supposed to determine the distance of a box from the edges of its container. Margin always affects the position of the box.

[homer.j.simpson]

Margin is supposed to determine the distance of a box from the edges of its container. Margin always affects the position of the box.

Ya that's what I meant. Instead of moving just the child elements, it moves the whole container. Anyway, I found the root cause; it was height attributes that I set on both the parent and the child. When I eliminate the height attribute of the chlid, the margin works as it should.

[ShadowMage]

Margin is supposed to determine the distance of a box from the edges of its container. Margin always affects the position of the box.

But it also defines the distance between the box and other elements around it not just it's parent container. Besides I thought padding is supposed to define the distance between the edges of a parent and its children.

[homer.j.simpson]

Thant's an interesting read. I always thought margin attribute is like that of word documents - defines distance from the container's edge to the contents. Anyway, like I said in earlier post, don't know why, but margin does the trick when I remove the high attribute of the child.

[Synook]

			   +-----------------------------------+			   |				 contents contents |			   |				 contents contents |<-- margin --> | <-- padding --> +---------------+ |			   |				 | child child   | |			   |				 +---------------+ |			   +-----------------------------------+

[homer.j.simpson]

Thanks for the replies guys.cheers