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
kj2
5,933 PointsOffset
How is offset different than margin or padding?
4 Answers
George Cristian Manea
30,787 Pointswith 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.
George Cristian Manea
30,787 PointsMargin 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.
kj2
5,933 Pointsthanks George, but could you use margin or padding to get the same affect as offset?
kj2
5,933 Pointsthanks George, but could you use margin or padding to get the same affect as offset?
George Cristian Manea
30,787 PointsAnd 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.
kj2
5,933 PointsThanks George! thats makes more sense to me now, thanks