Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.Start your free trial
How is offset different than margin or padding?
with padding and margin yes, but the offset not quite. For example you have 3 block inline...if you say margin-left:10px; for the second block, it will push itself 10 pixels to the right while mantaining the distance between itself and the next one, but if you say left:10px it will go over the next block.
<!DOCTYPE html> <html> <head></head> <body> <div style="background:red;;float:left; width:100px;">asdasdasdas</div> <div style="background:blue;margin-left:30px; position:relative;float:left;width:100px;">asdasdas</div> <div style="background:green;width:100px;float:left;">asdasdasdas</div> </body> </html>
Paste the code above in a workspace and replace margin-left with left, see what happens.
The problem with padding is that if you have a border you will push it outside so it cannot replace the margin property.
Margin is the distance between your block and the next or previous, meanwhile the offset is the distance between your block and the edge of his first parent with the position rule relative absolute or fixed.
The offset is used when your block has it's position anything but static.
Padding is the distance between the edge of the block and it's content.
thanks George, but could you use margin or padding to get the same affect as offset?
And i forgot to mention that padding increases your width, so even if you obtain the right visual effect you will also have some secondary effects that can mess with your layout.