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

HTML How to Make a Website Customizing Colors and Fonts Pick Fonts and Set Relative Units

Posted by katharine horlick
katharine horlick
2,146 Points

very confused about margins and padding, could someone please explain in really simple terms what they do

i literally just do not understand how the margin works, or the padding, in this example when a margin was added to the text i could not see any difference at all. would be v appreciated it somebody could explain it to me

3 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

This is a strange analogy, but I'm going to give it a go. Imagine you bought a coffee cup for your best friend, but she lives a long way away from you. And you're going to send it to her for her birthday. The coffee cup in the analogy represents your content (let's say your paragraph text). The padding represents the bubble wrap you put around the coffee cup to protect it. The border represents the box that all of this is in. And the margin would represent the amount of distance this box has to other items inside the moving truck .

But to give you a clearer visual representation of this, I suggest you check out this link:

http://www.w3schools.com/css/css_boxmodel.asp

Hope this helps! :sparkles:

katharine horlick
katharine horlick
2,146 Points
katharine horlick
katharine horlick
2,146 Points

thank you jennifer! the analogy was really helpful and made it much clearer! but why are there so many layers of 'packaging', it seems as though the margin and the padding are pretty indistinguishable, so why, in some instances are both applied?

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

I think it's mostly just to give us more options :smiley: Sometimes you want your content to be a little further away from certain things. I can almost guarantee you this will be a little more evident when your projects get larger and you have more and more containers and content :smiley:

Kevin Korte
Kevin Korte
28,148 Points
Kevin Korte
Kevin Korte
28,148 Points

It is difficult to wrap your head around right now, but Jennifer is right, as your project grows, it'll make more sense. Here is an example all of the time that I use.

Let's say you have a button, that submits a form. If you add padding to the button, it's going to increase the clickable area of the button, but not necessarily keep other element around the button away from it. Margin does the opposite, it pushes other items away from it.

I'm a visual learner, so check out this: http://codepen.io/kevink/pen/vKJdja?editors=1100

I used heavy padding and margin numbers to make it obvious. Play around with changing the values and see what happens.

Sandis Upmalis
Sandis Upmalis
2,073 Points
Sandis Upmalis
Sandis Upmalis
2,073 Points

Hi, Katharine! I also was confusing at first time. I give you some resourses where you can find useful information about box model. I hope it hepl you undertsand deply.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model

https://docs.webplatform.org/wiki/tutorials/box_model