Yeah what is the difference in margin and padding?

Question

Aren't they basically the same.

Answer 1

To expand on Arb Rahim Badsa code and example

Blue = margin
Black = border
Red = padding
Yellow = element/content

https://code.sololearn.com/Wr4uQ3E94uWa/?ref=app

Answer 2

Joel Sanders Hey there, they aren't the same. Consider the following example :

Margin :

------------------------
| |
| |
| |
| |
------------------------

Imagine, this is a box. The margin will determine where it should from it's parent. For example, if you set the margin of this box 20px: it will look like :

20px
|
------------------------
| |
| |
--20px--| |--20px--
| |
------------------------
|
20px

Here is a code sample :))

https://code.sololearn.com/WQO492Almp7V/?ref=app

Answer 3

And for padding :

Padding is what specifies how far your content should from the border inside the box. Check the code. The text 'I am padding' is 15px left, 15px top, 15px bottom and even 15px right from the box's borders. This is what padding is :))

Answer 4

You may find answer in :-
1) https://www.google.com/search?q=margin+vs+padding&rlz=1C9BKJA_enUS705US705&oq=margin+vs+&aqs=chrome.0.0j69i57j0l2.8236j0j4&hl=en-US&sourceid=chrome-mobile&ie=UTF-8
2) https://medium.com/frontendshortcut/margin-vs-padding-c1fc8ea8bfaf
3) https://www.pluralsight.com/blog/creative-professional/whats-difference-margin-padding

Answer 5

Oh ok I see what you mean that last example was very helpful! Thank you for the excellent detail and time you put in! :)