Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Aaron Banerjee
2,509 PointsHi everyone, I was wondering if anyone could explain to me what the padding and margin element do?
I do not exactly under stand what the padding and margin element do, so I was wondering if anyone could explain them to me, thanks
MOD Edit: Changed Topic of post to better reflect subject of question.
3 Answers
Corbin Balzan
11,751 PointsAaron,
Like Christian said the padding adds extra space to the inside of an element while the margin gives the element space on the outside around it. For example, when you add a border or a background color the style will surround the content AND the padding that you specify. It will not surround the margin because that is on the outside. In addition, if you add padding around an anchor element then it is in the click region and is trigger by the clicking event while clicking on the margin of an element has no effect.
So in summary, the main use of the margin is to separate the block from other things around it and the padding adds space around the content to move it further from the edge of the box.
Corbin
Christian Bryant
Front End Web Development Techdegree Student 8,296 Pointssimply put, margin is the spacing on the outside of an element where as padding is on the inside.
MOD Edit: moved your "Comment" to "Answer" so it may be up voted and/or marked as Best Answer.
Lauri Neuding
13,525 PointsIt might be good to explain what an element is. In its simplest terms, an element is comprised of a rectangle "box" surrounding each "thing." A element comprising a "word" is not the literal space taken up by the irregular shape of that word, it is the rectangle drawn around it. It gets a little tricky when looking at the result because default padding is applied to things like <p> and <h1> elements so their containing box seems bigger than it really is. That's why, in HTML only, there seems to be more space between headline elements than between paragraph elements. It is the default padding applied by the browser. Adding and subtracting padding or margins is a way to manipulate the apparent space between elements, but padding affects the actual size of the containing box while margin puts space between them.