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 Klemen Horjak
Klemen Horjak
4,737 Points

Margin vs. padding to make gutter between columns

Hello world!

1.) I would like to add background-color to columns (and white space between them), so the padding-left or right isn't the solution to make gutter between columns...

But if I add margin-left or right to columns, the columns collapses. What is the best practice? To use margin left/right in %?

2.) What is the difference between... for example if I float primary and secondary column to left and right or if I float them both to left? What is the difference? What is the best practice if I have like 3, 4 or more columns? Is the best way to float them all to left?

3.) What is most common way to use nowadays... using floats (and clearfixes) or inline-blocks to make columns?

Thanks for answers, you are the best!

Best regards,

Klemen

1 Answer

Steven Parker
Steven Parker
243,266 Points
Steven Parker
Steven Parker
243,266 Points

  1. I'm not sure what you mean by "the column collapses". There is a phenomenon called "margin collapse", but as far as I know that only applies to vertical margins I would expect you could set margins with percentages or fixed values, depending on the look you're after.

  2. For uniform columns, I would expect you would float them all in the same direction, probably left. This keeps your code consistent regardless of the number of columns.

  3. I think a more modern and superior way to create columns than either floats or inline-blocks is by using a CSS Flexbox Layout.