What's new

margin vs padding?



#1
These two have been at war against each other for a long time, especially when an amateur is at hand...

So, what's the REAL difference between these too? :D In my experience and what i've read, padding manages things inside of an element and margins manage independent elements' relationships.
 
#2
Basically you are correct, padding applies to the inside of the container while margins apply to the outside. The best way to test the difference is to you create an element with a border and then adjust the padding and margin to see what they do. You should note however that margins won't affect the elements positioning if it is using absolute positioning.
 
#3
These two have been at war against each other for a long time, especially when an amateur is at hand...

So, what's the REAL difference between these too? :D In my experience and what i've read, padding manages things inside of an element and margins manage independent elements' relationships.
Yeah, you are right on that. Padding manages the inside. Although, it also adds up to the width and height of an element. For example, if I set my padding this way for an element with 700px width, and 100px height: padding: 50px 0 0 100px; which is 50px top, 0px right, 0px bottom, and 100px left. Then the element becomes 150px in height and 800px in width. But on the other hand margin has no effect on elements but just create a blank space to separate an element from the other.
 
#5


Top