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

Zev Cohen
Zev Cohen
2,770 Points
Posted by Zev Cohen
Zev Cohen
2,770 Points

increasing font size moves font and background down

exactly what the title says, its h1 within the .main-header

.main-header{ text-align:center; background: linear-gradient(#000, transparent 90%), linear-gradient(0deg, #fff, transparent); }

h1{ color: #000; font-size: 12rem; font-family: 'Abolition Regular', Helvetica, Arial, sans-serif; text-align: center; }

1 Answer

Andre Lorch de Oliveira
Andre Lorch de Oliveira
9,326 Points
Andre Lorch de Oliveira
Andre Lorch de Oliveira
9,326 Points

You're having a problem with the user-agent.

Browsers set out-of-the box certain attributes to the elements. Your <h1> gets a margin-top and margin-bottom automatically. That's why all frameworks like Bootstrap and Foundation "reset" or "normalize" the styles.

For more about this check this comment on stackoverflow

If you add a margin-top: 0 to your <h1> and then change your font-size the elements will not shift vertically.

See this pen: https://codepen.io/aboutandre/pen/bmVOpz

Cheers

Zev Cohen
Zev Cohen
2,770 Points
Zev Cohen
Zev Cohen
2,770 Points

you are the best, thanks.