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 CSS Layout The CSS Box Model Padding

David Douglas
David Douglas
3,719 Points

Padding VS Margin?

In regards to the horizontal spacing between section of text, such as headers and paragraphs (eg. see below), is there a general rule as to whether you should first begin with margin or padding for separation? I understand that padding is the space inside a box and margin is the space outside a box. If there is a single background-color and no borders, its seems that you could get the same/similar look whether using margin or padding.

Article Title

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolor nihil repudiandae possimus dolores, vitae nobis inventore commodi error suscipit culpa labore laboriosam? Ipsa quam sed quisquam dicta porro minima excepturi... read more>>

Article Title

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolor nihil repudiandae possimus dolores, vitae nobis inventore commodi error suscipit culpa labore laboriosam? Ipsa quam sed quisquam dicta porro minima excepturi... read more>>

1 Answer

Steven Parker
Steven Parker
231,248 Points

You should notice a difference in the background color. When you use padding, the color will extend into the expanded space area, but when you use margin, the color will only be in the original area.

David Douglas
David Douglas
3,719 Points

That I understand. If my header and paragraph have different colored backgrounds, I would use padding so the text was not right next the the edge of the box and then margins to potentially separate the two boxes creating white space in between. In the event that it's a solid white background, is there a general rule that you should start spacing thing out with margins before padding or vise versa? Should text generally have padding in the event you plan to give it a border or background color?

Steven Parker
Steven Parker
231,248 Points

In general, padding is for adding space to an element, and margin is for adding space between elements.

Margins between adjacent elements will collapse (to whichever is larger) but padding will not.