Margin vs. Padding


#1

Could someone offer insight on when to use margin vs. padding... i am having trouble understanding the exact differences and when to apply each

Thanks in advance!!


#2

Once you understand what each do, i think you can decide for yourself when to use what. Lets break it down, take a look at this bin, as you can see, i made some comments. Feel free to uncomment them, in turn. As you will see, margin will push the boxes around, padding is the spacing inside the box. The box will expand when padding is applied. Take a look what happens to the text inside the box, it will move (since padding is the spacing inside the box). You can read more about padding here and more about margin here


#3

browser offer tools to show us this nicely, in the bin, right click on the aqua div, and select -> inspect element, you will get something like this:

As you can see, the browser nicely indicates with yellow the margin, and with purple (it doesn't look purple due to the aqua background of the box) the padding, in the left window, there also somewhere a button that says box, model, that is also really nice to use.