Difference between left: 10px and padding-left: 10px

Does anyone know what the difference between the css code: left:10px and padding-left:10px is?
It gives both different results. left is also not the same as margin-left appearantly.

 

As far as I know, top/left/right/bottom are used on elements that have been given a value for property other than static (absolute, fixed, relative).

So something like

p { left:10px; } will not work at all since the paragraph's position is by default static. If you give it a value of relative, absolute, or fixed then it would work as expected

p { position:relative; left:10px; }

You should not be using left/top/bottom/right but instead margin/padding so that the element is in normal flow.

I would only resort to absolute positioning if I wanted something that wasn't important in source order but had to appear say, at the top of the page, and with absolute positioning I could do that.. place the item at the bottom of the source but visually with top:0; right:0; and a position value of absolute (relative on the container) it would appear at the top right.

 

Ok, let's break this down:

padding - adds space TO the render box. Width:300px; padding:10px; = 320px wide box.

margin - sets a minimum space AROUND the render box. (and with negatives can shrink the space) Width:300px; margin:10px; = 300px box with a minimum of 20px spacing around it.

top/left/bottom/right when combined with position:relative - moves the whole box WITHOUT changing it's position in flow. Width:300px; position:relative; left:10px; = 300px wide box, the rendered content on screen 10px to the left of where the engine will treat it for determining flow.

top/left/bottom/right when combined with position:absolute - removes the box from flow and positions it absolutely based on either a relative or absolute positioned container, or the screen if no positioned container is present.

top/left/bottom/right when combined with position:static - positions the element absolutely to the screen (not available in all browsers)

Five different behaviors... five different properties.

Realistically position:relative with left should be used sparingly for minor adjustments, if at all. It's just too unreliable cross browser and leads to more layout headaches than it ever solves.

Much the same can be said for position:absolute for anything that SHOULD be a flow element. If it's to position something inside a container like an anchor or header, fine... but using it on a column is a total /FAIL/

99.99% of the time padding or margins will do the job with a LOT less headaches.

 

thx, useful info.