Jump to content

Margin


shane18

Recommended Posts

Doesn't the margin only make sure a box is so far away from another box?

 

<div style="position: absolute; left: 50px; margin-top: 200px; width: 200px; height: 100px; border: 1px dotted #FF6600; color: #FF0000;">
TEST
</div>

 

Why does the margin stuff push the div 200px downwards if it is set to absolute and theres nothing above the div...

 

Can someone explain to me why margin/position stuff works like this? Confuses me so much!

Link to comment
Share on other sites

What browser version are you using? That is very important, try that code in Firefox and see if you get the same results. If you are using IE6, well that is why. IE6 is just fubar when it comes to CSS and you have to code it a certain way and that often break Firefox, so yea. It is an endless loop of sucks and you have to hack the style sheets or create multiples.

 

But depending on what browser you are using to test, their could be several answers.

Link to comment
Share on other sites

As far as I was taught, a margin is the space around an object. Think of it link in Word when creating a document, you have a margin border around the whole document, same deal.

 

So when you say margin-top, it spaces the item that far from the top margin, etc etc. That is the best way I know how to explain it. A way to see this, is the following code:

 

<div style="position: absolute; left: 50px; margin-top: 200px; width: 200px; height: 100px; border: 1px dotted #FF6600; color: #FF0000;">
TEST
</div>
<div style="position: absolute; left: 50px; margin-top: 205px; width: 200px; height: 100px; border: 1px dotted #FF6600; color: #FF0000;">
TEST
</div>

 

You will see that the second div will now be on top of the first just 5 pixels below it. Hopefully that clears it up a bit.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

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.   Restore formatting

  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.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.