Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Foundations The Box Model Positioning Properties

Offset

How is offset different than margin or padding?

4 Answers

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?

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.

Thanks George! thats makes more sense to me now, thanks