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 Basics Page Layout with the Float Property The Float Challenge Solution

Richard Verbraak
Richard Verbraak
7,739 Points
Posted by Richard Verbraak
Richard Verbraak
7,739 Points

Gutters in CSS

I think the concept of padding and margin is still not completely clear to me especially during this test.

I used margin instead of padding which made the columns drop all the way down and not side by side. Why won't the margin value work since it seperates the columns as well by creating gutters?

Kirt Perez
Kirt Perez
7,374 Points

It looks like you need to adjust the widths of the container that is being floated in order to adjust the gutters with margin. If you're adding margin in this case, you need to lower the width so that the margins fill out the rest of the width up to 100%. If you use padding, it seems you don't have to adjust the width.

2 Answers

Linas Mackonis
Linas Mackonis
7,071 Points
Linas Mackonis
Linas Mackonis
7,071 Points

Hi Richard,

The basic difference between the padding and margin is that margin creates the space in the outside of the element or the space that comes after the border of each element.

Meanwhile padding creates additional space in the inside of an element, which is between the content and the border of the element. Thus, if can affect the whole content of your layout respectively.

Hope that helps.

Diane Houghton
Diane Houghton
5,773 Points
Diane Houghton
Diane Houghton
5,773 Points

Think of your content as an actual cardboard box with stuff in it. Padding goes inside the box, which takes up room and makes the stuff smaller, but the box is still the same. When you add margin, it goes outside the box, which pushes the other boxes next to it away. Hope this helps.