Margin and Padding

[Kevin M]

I'm a bit confused with the difference between margin and padding. According to W3Schools, margin defines the space around elements, and padding defines the space between the element border and and the element content.So, I don't know if I understand right, but if I set the margin to 10px for one of my DIVs, there wouldn't be anything within 10px of the div right? Even if there was something that was going to overlap it, it would be pushed away?And then I set the padding to 5px, inside the DIV, all the content would be 5px from the top, left, right and bottom?Thanks,Kevin

[miles5150]

I'm a bit confused with the difference between margin and padding. According to W3Schools, margin defines the space around elements, and padding defines the space between the element border and and the element content.So, I don't know if I understand right, but if I set the margin to 10px for one of my DIVs, there wouldn't be anything within 10px of the div right? Even if there was something that was going to overlap it, it would be pushed away?And then I set the padding to 5px, inside the DIV, all the content would be 5px from the top, left, right and bottom?Thanks,Kevin

Hi Kevin,W3C's description is right but you will find that margins and padding are treated differently in different browsers. Like you say if you have a box 10px by 10px and have a margin of 5px then any surrounding content would stay 5px away from your box, its basically a 5px space around your box. Padding is the space between your content and the box edges. I would definately recommend reading up on the box model and how it is translated differently in various browsers.RegardsJustin