Bummer! You must be logged in to access this page.

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

CSS

Posted by Chung Chin Ang
Chung Chin Ang
1,787 Points

Question on padding and margin

Hello, I'm curious to find out:

  1. When/How do you decide to use padding vs. margin?
  2. When decided on one or a combination of both, how would you know the units to assign i.e., how do you know it's 5px 0 0 0 and not say 10px 0 0 0?

5 Answers

Peter Ramsing
Peter Ramsing
16,814 Points
  1. Padding is on the inside, margin is on the outside. So if you wanted text to not go right to the edge of your frame you would add padding and if you wanted your frame to not but right up against another you would add margin. Here's an image that might help:

Margin and Padding Image

  1. Trial and error...and experience. As you design more you will be able to look and have a good feeling about how much padding/margin you'll want...and they you try it and probably make adjustments.
Chung Chin Ang
Chung Chin Ang
1,787 Points

Hi Peter,

Thanks for the reply and image. That's helpful. So, based on your reply, would it be right to say then that I will consider padding first when I need to adjust my text, and not margin?

Peter Ramsing
Peter Ramsing
16,814 Points

It's totally case by case. I'd just go and play around with a few different elements with text in them and see what happens when you make adjustments. ...but if you just want to adjust how your text (or anything else, really) interacts within your element then it's probably padding you're going to play with.

An important thing to note about margin, which has caused me to have to go back and redo code many times, is that a margin affects how an element interacts with other objects on the page. For example: If you have an image that you set to 200px wide but then add a 5px margin to the left and right, that image now takes up more space (210px) and that can get you in trouble if you forgot you did that later in your project. You can use dev tools to help see those bounds and really help in the debugging process if you do run into that.

(that also applies to %'s as well. 50% wide with 5% margin on the left and right now make that element 60% wide)

Jeremy Williams
Jeremy Williams
9,078 Points
Jeremy Williams
Jeremy Williams
9,078 Points

From what I know, padding makes the space directly around an object such as text bigger or smaller, If you use your mouse to highlight a word, the part that is highlighted around the letters is the padding. The margin is used to specify the distance from the outer edge of the padding to the next object or element on the screen. The determination of what units and how many to assign, will come with practice and trial and error.

Saulius K
PLUS
Saulius K
Courses Plus Student 15,928 Points
Saulius K
Saulius K
Courses Plus Student 15,928 Points
  1. The big decider for padding vs margin is usually based on what sort of spacing you want to achieve in relation to the border and background of your shape.

Imagine you create a div box with a blue background.

If you use 5px padding, the content inside your box will move five pixels inside.

This will mean it's five pixels inside any border. It also means that five pixels of any background you have added will precede any content. It's indentation inside of the box.

If you give it a margin, it's adds / removes space outside of the box.

It's dependant on the style and the design effect your trying to achieve.

I hope that makes some sense. It becomes second nature with experience, when you know exactly what you want to achieve design-wise.

  1. You will get better at judging / estimating units in time. The more you use them, the better you'll become at judging them by eye.

If you have a design already and want to find out an exact value, you can use something like the slice tool in Photoshop (then right click the slice for its measurements), to measure the distance of paddings / margins and the size of shapes in your design.

Hope that helps.

matthewcarey
matthewcarey
6,173 Points
matthewcarey
matthewcarey
6,173 Points

I think of margins as giving content some elbow room away from other content on the page. I wouldn't use padding to add space between content like two separate images in their own div tags. I generally use padding on navigation links in a menu bar or keep a paragraph from butting up against a border.

Chung Chin Ang
Chung Chin Ang
1,787 Points
Chung Chin Ang
Chung Chin Ang
1,787 Points

Thanks everyone. I appreciate the kind help given; it was great to hear different kind of explanations as some words rephrased in a different manner managed to strike a chord and that enlightens.

Thank you.