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

General Discussion

Posted by orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

padding/border/margin to margin collapse

Hello!

1) The instructor says the best way to solve a margin-collapse issue is by giving the header a "padding" or a "border". 1) I wonder what would be this rule's equivalent in 'border' .main-header{padding:20px}

2) Can we fix a margin-collapse issue with a margin style rule? for ex: main-header{margin-top:20px}

3) If padding, border or margin can be used to clear a margin collapse, what is the general rule of thumb for choosing one over the other?

thanks

2 Answers

ixrevo
ixrevo
32,051 Points
ixrevo
ixrevo
32,051 Points

Hi Orange Sky!

There is a good article about margin collapsing on the MDN: Margin collapsing.

  1. I didn't get this question. Could you rephrase it, please.
  2. I didn't catch the meaning of this questions too. Do you mean some specific case or you ask in general?
  3. I believe, the general rule is to use method that best suits your need in every particular situation. E.g. sometimes you need a border for an element and with it you get fix for collapsed margins. But sometimes borders are not what you need and you should consider other methods to fix margin collapsing issue.

May be CSS Specification would be useful: Box model - Collapsing margins.

I'm sure you can find answers on your own if you read articles by the links above. But I'm ready to answer your further questions.

orange sky
seal-mask
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points
orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

Thanks Alexander I will look into the links you sent me to get a deeper understanding.

ixrevo
ixrevo
32,051 Points

Of cause I could retell you the content of these articles, but to make so in English is hard to me. Sorry.