Jump to content
Sign in to follow this  
homer.j.simpson

Div Element Moved

Recommended Posts

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?

Share this post


Link to post
Share on other sites

Maybe you want to change the padding?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Edited by endrew

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
			   +-----------------------------------+			   |				 contents contents |			   |				 contents contents |<-- margin --> | <-- padding --> +---------------+ |			   |				 | child child   | |			   |				 +---------------+ |			   +-----------------------------------+

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...