Grow your CSS skills. Land your dream job.

difference bitween css left and padding-left

  • # September 12, 2008 at 5:58 am

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

    # September 12, 2008 at 9:14 am

    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.

    # September 12, 2008 at 9:23 am

    plz show the css of those images to understand.

    # September 12, 2008 at 9:30 am
    "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 :)

    # September 12, 2008 at 10:30 am

    so the offset is similar to margin-left

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".