margin vs padding?

[MedicAlert]

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? In my experience and what i've read, padding manages things inside of an element and margins manage independent elements' relationships.

 

[crazycroc]

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.

 

[Cybergenius]

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? 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.

 

[TagSelector]

One thing to note about padding is that since it is inside the element the background color extends to it.
If you want a separate background color for the padding, set the background-clip attribute to content-box
and set the box-shadow attribute spread radius equal to the padding value.

Refer to the link below:

https://stackoverflow.com/questions/14628601/can-i-add-background-color-only-for-padding

 

[martinsmith]

One thing to note about padding is that since it is inside the element the background color extends to it.
If you want a separate background color for the padding, set the background-clip attribute to content-box
and set the box-shadow attribute spread radius equal to the padding value.

Refer to the link below:

https://stackoverflow.com/questions/14628601/can-i-add-background-color-only-for-padding

Thanks for sharing the useful info...

 

[Paro]

Margin is outer space of an element, while padding is inner space of an element. Margin is the space outside the border of an element, while padding is the space inside the border of it. Margin accepts the value of auto: margin: auto , but you can't set padding to auto.