difference bitween css left and padding-left

[jitendra]

What is the difference between .classname{left :400px} and .classname{padding-left :400px} in a Position :relative div

[jordan]

The simplest explanation is that setting the padding affects the size of the element, but not the actual position, whereas setting the offset changes the position, but not the size.

Here’s a graphic that might help:

[img]http://i35.tinypic.com/ipo906.jpg[/img]

The top image shows an element (the pink one) positioned with the left and top offset inside of its parent element (the gray one). The positioned element maintains it’s size, but the edges of the element are moved away from the edges of its parent.

The bottom image shows the pink element with padding and no offset. The top and left edges of the positioned element stay in the same place (assuming top and left padding were set), but the content of the element is moved within the element itself, so it becomes larger.

[jordan]

"jitendra" wrote:

plz show the css of those images to understand.

The top image would be similar to:

Code:

.class {left: 10px; top: 10px;}

The bottom would be similar to:

Code:

.class {padding-left: 10px; padding-top: 10px;}

The images obviously aren’t exactly 10px, nor are they to scale, but hopefully that helps explain it a little better :)

[Author]

Posts