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 trialChristian Delos Reyes
9,199 PointsIsn't <label> an in-line element by default?
If that's the case, why is it a necessary step to change it to an in-line on the class="light"?
1 Answer
Steven Parker
231,275 PointsYou're right, a <label> is in-line by default, so setting the display
mode to in-line
would not be needed.
But one reason you might do this in the class rule is in case the class might also be applied to other elements that have different defaults, to cause them all to be treated the same way.
Christian Delos Reyes
9,199 PointsChristian Delos Reyes
9,199 PointsThank you. But when I remove the display: in-line from the class rule, <label> moves to a new line as if it is a block, being under <input type="checkbox"....>
Steven Parker
231,275 PointsSteven Parker
231,275 PointsPerhaps it's needed to override some other rule then. Can you make a snapshot of your workspace and post the link to it here?
Christian Delos Reyes
9,199 PointsChristian Delos Reyes
9,199 Pointshttps://w.trhou.se/c90dco24dz
Steven Parker
231,275 PointsSteven Parker
231,275 PointsAs I suspected, on line 88 of "main.css" there is an explicit "
display: block
" setting in the rule for all labels. Thelabel.light
rule overrides it to set the display mode back to inline.Christian Delos Reyes
9,199 PointsChristian Delos Reyes
9,199 Pointsthanks steven. your answers throughout the track have been truly helpful.