0
Yeah what is the difference in margin and padding?
Aren't they basically the same.
5 Answers
+ 3
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
+ 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
+ 2
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 :))
+ 1
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
0
Oh ok I see what you mean that last example was very helpful! Thank you for the excellent detail and time you put in! :)