Html-css[margins and padding]

What are the uses of margin and negative values of it? I’m not able to understand the functionalities of margin element and padding element.

Best way I have to describe (and remember for myself) padding and margin is… take a div for example, think of it like a box. Padding is the stuff that goes into the box cushioning the contents inside of it. Margin is all the space outside of the box.

padding can only fill the space of the box, so its lowest number is 0, meaning no padding at all. If you add padding, it will push the contents of the box deeper into the box.

Margin can take up all the space outside of the box, 0 is where the box begins…so if you add margin to the top of the box, it will push the entire box down to make more room for the space, but if you take away margin (negative value) it will pull the entire box up, since that space is now gone making room for the box to move up.

1 Like

Thank you for explaining the uses of padding and margin elements

No prob! It can be tricky, especially when they appear to do the same thing (ie margin-top and padding-top both seeming to move the contents down) but it saves a lot of time and hearrtache getting your layout the way you want when you understand what exactly is going on.

1 Like