I am Having problems learning about margins and postioning an element

They look similar but there is a key difference:

• Margin -> Outside of the element
• Padding -> Inside of the element

You can think of it like this: If you want to position or move the element away from the surrounding elements (div) you will use margin. If you want to position or move the element inside of the block you would use padding.

http://www.avajava.com/tutorials/cascading-style-sheets/how-are-margins-borders-padding-and-content-related/how-are-margins-borders-padding-and-content-related-01.gif

Hope this helps

Yeah, that's probably one of the trickiest parts for beginners!

As Domen said already, you have to figure Margin as the outside boundaries of the elements while Padding are the insides of the elements. Let us go graphically with the image our good buddy Domen linked to us:

http://www.avajava.com/tutorials/cascading-style-sheets/how-are-margins-borders-padding-and-content-related/how-are-margins-borders-padding-and-content-related-01.gif

The MARGINS push the boundries FROM THE INSIDE TO THE OUTSIDES.

The PADDINGS enlarge the available space that the element can live in. In terms of fantasy: let us say you have a house with a nice garden; the garden is fenced from all sides. Those are margins. Now you have the house. Houses have walls, right? The walls are the PADDINGS. Let us go nuts and "ENLARGE" our house. You are actually setting the paddings of your house to a higher value, by doing so you are also taking space form the garden. How to fix this? Raise the margins (Garden fences).

I hope this was a helpful (even if stupid) explanation!!

As for positioning, it depends on how you want to do that. You can position an element by setting its margins\padding properties, or you can use the "POSITION" property. The position property has 4 different (main) ways to work: -Inherit (you don't say!) -Fixed (Fixed position to the screen, will never move from there even if you are scrolling. Often used by navigation items) -Absolute (Takes off from the page flow, much like fixed, but will stay in the position you gave the element, always. If you scroll, it will still stay where you put it) -Relative (Ability to position the element but it will still stay in the flow. Useful for setting a DIV (or other) as a PARENT POSITION so that you can move the absolute elements inside the Relative Element)