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:
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.