- This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
Viewing 3 posts - 1 through 3 (of 3 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
What is the difference between .classname{left :400px} and .classname{padding-left :400px} in a Position :relative div
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.
The top image would be similar to:
The bottom would be similar to:
The images obviously aren’t exactly 10px, nor are they to scale, but hopefully that helps explain it a little better :)