What's new
HTML Forums | An HTML and CSS Coding Community

Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!

margin vs padding?

MedicAlert

Junior Member
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.
 
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.
 
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.
 
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.
 
Back
Top