Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Layout The CSS Box Model Padding

David Douglas
David Douglas
2,555 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
220,925 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
2,555 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
220,925 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.