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

HTML HTML Forms Choosing Options Checkboxes

Christian Delos Reyes
Christian Delos Reyes
9,199 Points

Isn'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
Steven Parker
230,995 Points

You'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
Christian Delos Reyes
9,199 Points

Thank 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
Steven Parker
230,995 Points

Perhaps it's needed to override some other rule then. Can you make a snapshot of your workspace and post the link to it here?

Steven Parker
Steven Parker
230,995 Points

As I suspected, on line 88 of "main.css" there is an explicit "display: block" setting in the rule for all labels. The label.light rule overrides it to set the display mode back to inline.

Christian Delos Reyes
Christian Delos Reyes
9,199 Points

thanks steven. your answers throughout the track have been truly helpful.